CSS attr() Function

An attribute is a name and a value written inside an HTML tag, such as href="/returns" on a link or data-badge="Sale" on a card. The attr() function reads the value of one attribute of the element that a rule matches, and returns it to the style sheet. The most common place to use it is the content property of ::before and ::after, which the chapter on pseudo-classes and pseudo-elements introduced.

Attributes whose names start with data- are reserved for your own data. HTML gives them no meaning, so you can invent names such as data-badge or `data-size