attr() + content

You can treat data-* attributes as a tiny UI API between HTML and CSS.

Set the value once on the element, then let pseudo-elements read it with attr():

• Tooltip copy from data-tooltip
• Status badge from data-status
• Priority label from data-priority

The important shift is architectural, not visual: the attribute is the source of truth, CSS is the renderer.

Gotcha: today attr() is broadly usable for generated content on ::before and ::after. CSS Values & Units Level 5 expands it for other properties, but support is still incomplete across browsers.