css3 & content & attr & data-*

css3 & content & attr & data-*

content: attr(data-value);

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