I was fooling around which though about the notification element which some websites have. For example you have a menu item as Job and then you want to highlight the number of jobs available.

I can think of different cases for this, so here is the simple version of it

<h1>The mark element<a href="https://semilgreenweb.com" target="_blank"><sup><mark>1</mark></sup></a></h1>

<p>Do not forget to buy <mark>milk</mark> today.</p>

and here is the CSS codes for that

a{text-decoration: none;}
    mark{
    background-color: #ff553c;
    Color: white;
    padding: 2px 8px;
    border-radius: 16px;
    animation: blink 1.5s linear infinite;}
@keyframes blink{
  0%{opacity: 0.5;}
  50%{opacity: 0;}
  75%{opacity: 0.5;}
  100%{opacity: 1;}
    }
    sup {
  vertical-align: sup;
  font-size: 16px;
}
Tagged: