5

I need a simple badge system that can be applied to numerous types of html elements.

Something like the ones you find on a messaging app on your mobile phone.

Something like this;

enter image description here

Mokky Miah
  • 1,213
  • 2
  • 11
  • 29
  • Wait... you created a question just for the sake of answering it? – Terry Sep 21 '17 at 10:34
  • I couldn't find a simple solution when I was looking for the solution myself. Once I worked out a solution I thought it's worth sharing incase someone else is looking for something like this. Also I am hoping others can improve on my answer/solution :) – Mokky Miah Sep 21 '17 at 10:36
  • 2
    Really? What about [this](https://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol), [this](https://stackoverflow.com/questions/34685233/css-badge-over-image-with-bootstrap), [this](https://stackoverflow.com/questions/28264375/how-to-align-badge-on-top-of-icon), [this](https://stackoverflow.com/questions/27015025/badges-for-buttons-using-html-and-css), and [this](https://stackoverflow.com/questions/17617660/how-to-place-a-badge-in-lower-right-corner-of-a-media-in-bootstrap) question? There are a ton of duplicates out there. – Terry Sep 21 '17 at 10:39
  • @Terry, It'd be nice if this were marked as duplicate instead of off-topic. I actually like this answer but it belongs on a different question instead of this new one. I suppose the question needs to be edited to be upgraded from off-topic to duplicate? – KCE Jun 12 '19 at 16:42

1 Answers1

13

Answering my own question for the benefit of others.

Recently I have created a badge system using css that can be applied to any html element.

I hope this helps anyone else that is looking for something like this.

This is done using css pseudo element being applied after the host element. A badge can be applied to any element by simply adding a badge attribute with a value.

Some host elements may need to add overrides if the badge's default position/style is not suitable.

The content of the pseudo element is inherited from the attribute badge.

If no value, a value of 0 or a negative value is given, the badge will not display by default. If you need to display badge with 0 or a negative value, use css override or remove the rules from your css file.

Example of an override;

.my-unusual-element[badge="0"]:after {
    display: initial;
}

This is a CSS only solution and is intended to be a light weight badge system.

I posted a fiddle here for demo.

[badge]:after {
      background: red;
    border-radius: 30px;
    color: #fff;
    content: attr(badge);
    font-size: 11px;
    margin-top: -10px;
    min-width: 20px;
    padding: 2px;
    position: absolute;
    text-align: center;
}

[badge^="-"]:after,
[badge="0"]:after,
[badge=""]:after {
   display: none;
}
<span badge="">Empty string</span>
<br>
<br>
<span badge="-1">-1</span>
<br>
<br>
<span badge="0">0</span>
<br>
<br>
<span badge="1">1</span>
Mokky Miah
  • 1,213
  • 2
  • 11
  • 29