The CSS attr() function got nothin on custom properties

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn't know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element.

It's like this:

div::after {
content: attr(data-whatever);
}

That's certainly interesting. You could use it for (rather inaccessible) tooltips, for example:

<button data-tooltip="Information only …

The CSS attr() function got nothin’ on custom properties is a post from CSS-Tricks