How to put a NEW symbol on a link

I have added some links in my web page. I have seen in few websites that when a new link is added, a NEW appears ABOVE such links.

How can I implement the same in my web page?

I am using HTML, CSS and Javascript to build my website.

Could we maybe get some kind of example how it should looks like - I have idea, but I’m not sure am I right.

Also could you please provide your current code, on playground such as codepen ?

If you go to

http://www.iitbbs.ac.in/

on the right hand side, under the heading News and Updates, you could find some links above which there is “NEW” shining.

Did you see how they did it (using something like inspect element)? They just added an image tag after the links.

What they probably did was add some server side code (or perhaps some js) which interrogates the links, and if they were added after a certain date, the image tag was added.

See right now I am only concerned about getting that “NEW” thing. As I am having a local server, I am not focusing on timing, date etc. of the link. For the time being, I can manually put the link and assign it as NEW and then after few days I can remove it manually.

Right now I am a novice, so trying to implement basic functionalities only

It could also be done with css.
Maybe adding class="new" to the <li> by some means. Then putting a selector for the calss in the css.

.new a::after {
    content: ' New!';
    /* Some other styling */
}
2 Likes

I would strongly advise against using flashing icons like the ones on the site you pointed us to. They are HIDEOUS!

2 Likes

This method will automate the process, so you don’t need to alter the html by adding or removing classes from the individual list items.
It will apply the css to the top “few” items, depending on what number you specify in the css.

<ul class="news">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

An odd looking css selector:-

.news li:not(:nth-child(1n + 5))::after {
  color: red;
  content: ' New!';
  font-family: sans-serif;
  font-size: 0.7em;
}

This will mark the top 4 items as “new”. The 4 is defined by the number 5 in the formula, the 5th item and onward will not be selected. So it’s the top # + 1 you put in the formula.
I thought there may be a simpler way to make this selection, but I have not found it.

4 Likes

thanks…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.