CSS3 & content & attr & data-* All In One

CSS3 & content & attr & data-* All In One

content & attr()

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;
}

demos

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

CSS attr() function

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

<button class="throttle-button-attr" data-delay="3" onclick="console.log('click button with atrr✅')">click button with attr </button>

.throttle-button-attr {
  /* CSS attr() function 暂不支持 animation 属性 ❌ */
  /* CSS attr() function 目前仅支持 content 属性 ✅ */
  animation: throttle attr(data-delay) step-end forwards;
  cursor: pointer;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---