CODEWITHSUNDEEP
htmlcss
TheUnknownChop
TheUnknownChop

Reputation: 117

How to make the small notification count next to an element

I have this following html tag

<li style="background-color: rgb(255, 255, 255);">
     <b><span class="need-confirm-number" style="/*height: 15px;*/ display: inline;">0</span></b>
     <a href="#" class="text-dark">My Submitted Requests</a>
</li>
I would like to make the notification count (b tag) appears to the left of the anchor tag? How would I do that?

Upvotes: 0

Views: 269

Answers (1)

Inus Saha
Inus Saha

Reputation: 1918

<li style="background-color: rgb(255, 255, 255);position:relative;">
     <span class="need-confirm-number" style="position:absolute; top: -5px; left: 5px; height: 15px;padding: 2px;display: inline-block; background:#ff0000; color:#fff; border-radius: 5px;"><b>0</b></span>
     <a href="#" class="text-dark">My Submitted Requests</a>
</li>

you may need something like this. this code may need many improvements. but you can get the idea from this. so basically your parent tag needs to be position:relative; then you make your notification counter position:absolute;and you correctly position it and design it.

Upvotes: 1

Related Questions