css-attr.md

CSS attr() new capabilities

<ui-rating data-rating="4.5"></ui-rating>

ui-rating {
  --percent-fill: calc(attr(data-rating type(<number>)) * 20%);
  background: linear-gradient(to right, gold var(--percent-fill), transparent var(--percent-fill));
}

• 2025-04-03 — Exploring the modern attr() in CSS
• 2025-03-25 — Custom progress element using attr()
• 2025-02-25 — How to Use attr() in CSS for Columns, Colors, and Font-Size
• 2025-01-21 — New capabilities for attr()
• Can I Use — attr() function for all properties