sun station sun station - 5 months ago 50
Sass (Sass) Question

Notification Badges with data-attribute value as CSS content

I'm trying to make a custom notification badge with CSS/SCSS. I want to insert content from html attribute (data-badge) as in the HTML code, but when I call it on the CSS it shows nothing.


<ul id="nav-mobile" class="right hide-on-med-and-down">
<a href="#" class="nav-icons"><i class="material-icons" data-badge="4">info</i></a>
<a href="#" class="nav-icons"><i class="material-icons">email</i></a>
<a href="#" class="dropdown-button" data-activates="dropdown-user">
<div class="chip">
<img src="/images/personal.png" alt="Contact Person">
Jane Doe
<i class="material-icons right">arrow_drop_down</i>


a.nav-icons {
max-height: 60px !important;
i.material-icons {
max-height: 60px;
font-size: 2rem;
line-height: 60px;
&[data-badge] {
content: attr(data-badge);
position: relative;
color: #fff;
&::after {
content: attr(data-badge);
position: absolute;
background: red;
border-radius: 50%;
display: block;
padding: 0.3em;
color: black;
font-size: 12px;
max-height: 20px;
max-width: auto;
right: -10px;
top: 8px;

Or, please see this fiddle below.

Thank you in advance


The issue is that the pseudo-element is inheriting the font-family of the icon which is, I believe, a ligature based icon-font.

This is why you can type the text "info" in the icon tag and get an icon to display rather than the text itself.

Since the data-badge is a number it has no equivalent in the Materialise font system and so nothing displays.

If you apply a font-family, say Verdana, to the pseudo-element ::after the number shows up*.

JSfiddle Demo

*Not where you expect but that would be another question I suspect

EDIT: The position of the text has been was due to a 60px line-height being inherited too.