Generated Content merupakan tools yang sangat berguna bagi para developer. Di dalam CSS, fitur ini disediakan oleh pseudo element ::after dan pseudo element ::before. Fitur ini membuat anda membuat lebih sedikit HTML dari pada biasanya dalam suatu layout. Hal ini sangat bermanfaat dalam kasus-kasus dimana anda memerlukan tambahan box shadow atau lemen yang memerlukan span atau div tambahan. Coba teman-teman perhatikan HTML di bawah :
<div class=”container”>
<span data-title=”I have a wonderful title!”>This is item</span>
<span data-title=”These titles are shown only using CSS, no JavaScript is used!”>This is item</span>
<span data-title=”Hello there!”>This is item</span>
<span data-title=”Generated content is awesome!”>This is item</span>
</div>
Dan berikut CSSnya :
.container{
counter-reset: cnt;
position:relative;
text-align:center;
padding:20px 0;
width:420px;
height: 160px;
margin: 0 auto;
}
.container::before{
display: block;
content:’Silahkan Hover Kotak Merah:’;
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
}
.container span{
display:inline-block;
padding:2px 6px;
background-color:red;
color:white;
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;
/* Animate the transitions */
-webkit-transition:opacity 0.4s;
transition:opacity 0.4s;
}
.container span:hover::before{
opacity:1;
}
Coba teman-teman save dan lihat hasilnya. Kita akan mendapatkan kotak merah dengan efek ketika di hover, maka tulisan dibawah akan terlihat. Jika kita melihat HTMLnya, itu hanya ada 4 span saja. Dengan counter dan pseudo element ::after dan ::before itulah kita dapat memberikan efek hover dikotak dan memunculkan tulisannya. Tanpa javascript. Oke teman-teman mungkin demikian sedikit yang saya bahas semoga dapat menjadi referensi buat teman-teman. Terima kasih..