sg552 sg552 - 5 months ago 10
CSS Question

Hide notification if data attribute value is 0 or empty

I have this code that will display notification circle:

HTML:



<div class="icon-container">
<span class="glyphicon glyphicon-list-alt">
<span onclick="showDetails(this)" id="MyControl" data-counter="2"></span>
</span>
</div>


CSS



[data-counter]:after {
content: attr(data-counter);
position: absolute;
top:-3px;
right: -14px;
padding: 3px 9px;
border: 2px solid white;
border-radius:100px;
background: linear-gradient(top, #FF6969 0%,#ff0000 100%);
background: -webkit-linear-gradient(top, #FF6969 0%,#ff0000 100%);
background: -moz-linear-gradient(top, #FF6969 0%,#ff0000 100%);
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
background-clip: padding-box;
font:bold 12px/18px "Helvetica Neue", sans-serif;
color: white;
text-decoration: no;
z-index: 1;
}


Output



enter image description here

My question is how do I hide the notification circle if
data-counter="0"
or
data-counter=""


Thanks in advance

Answer
[data-counter="0"]:after,
[data-counter=""]:after {
    display: none;
}

I guess this would do the trick?