css3 & content & attr & data-*

时间:2022-05-21 00:00:17

css3 & content & attr & data-*

content: attr(data-value);

css3 & content & attr & data-*

https://github.com/oliviale/CSS-Progress-Pie/blob/master/css/progress_pie_unicorn.css

https://codepen.io/collection/DQvYpQ/

<figure>
<div class="progress-pie-unicorn thick" data-value="90"></div>
<div class="progress-pie-unicorn thin" data-value="78"></div>
</figure>

.progress-pie-unicorn::after {
content: attr(data-value);
position: absolute;
width: 70%;
height: 70%;
margin: auto;
border-radius: 50%;
background-color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
font: 900 20px/41px Tahoma;
}

https://www.arm.com/products/silicon-ip-cpu

css3 & content & attr & data-*