Get value of attribute in CSS

css, html

Solution

You need the `attr` CSS function:

div {
    width: attr(data-width);
}

The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):

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.

Problem

I have this HTML code: ``` <div data-width="70"></div> ``` I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this: ``` div { width: [data-width]; } ``` I saw this was done somewhere, but I can't remember it. Thanks.

Original source