Bar Chart: Pseudo-element
Forrige øvelse
Næste øvelse
Opgavebeskrivelse
Brug et pseudo-element til at vise hver søjles data-percent-værdi over søjlen.
Nulstil øvelsen
<div class="bars-container">
<article class="bars">
<div class="bar" data-percent="100"></div>
<div class="bar" data-percent="70"></div>
<div class="bar" data-percent="60"></div>
<div class="bar" data-percent="50"></div>
<div class="bar" data-percent="40"></div>
<div class="bar" data-percent="30"></div>
<div class="bar" data-percent="20"></div>
<div class="bar" data-percent="10"></div>
</article>
</div>
Vis pseudo-element
Pseudo-element
.bar {
position: relative;
&::after {
content: attr(data-percent) "%";
position: absolute;
top: -1lh;
left: 0;
right: 0;
}
}