Content generation and counters HTML-CSS
Content generation – a powerful tool in the hands of developers – has become available thanks to pseudo-elements ::before and ::after. This feature allows you to use less HTML code to achieve the same results.
This is especially useful in cases where you need additional shadows or other visual elements that would need additional span or div elements. As a result, you will get a smaller and semantically correct HTML code.
CSS3 also gives pseudo-elements access to counters that can be incremented using a CSS rule. They can also access the attributes of the parent elements containing them. See the example code below.
<div class="container">
<span data-title=""></span>
<span data-title=""></span>
<span data-title=""></span>
<span data-title=""></span>
</div>
.container{
counter-reset: cnt;
position:relative;
text-align:center;
padding:20px 0;
width:420px;
height: 160px;
margin: 0 auto;
}
.container::before{
display: block;
content:'Hover Mouse:';
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
}
.container span{
display:inline-block;
padding:2px 6px;
background-color:#78CCD2;
color:#186C72;
border-radius:4px;
margin:3px;
cursor:default;
}
.container span::after{
counter-increment: cnt;
content:" #" counter(cnt);
display:inline-block;
padding:4px;
}
.container span::before{
position:absolute;
bottom:0;
left:0;
width:100%;
content:attr(data-title);
color:#666;
opacity:0;
-webkit-transition:opacity 0.4s;
transition:opacity 0.4s;
}
.container span:hover::before{
opacity:1;
}
Content generation is supported everywhere, including IE9 and above.
