How to Retrieve Attribute Values in CSS

<span data-icon="🌺" data-name="Hibiscus"></span>
<style>
    span::before {
        content: attr(data-name);
    }
</style>

.types {
    attr(data-src url);      /* Define type as url */
    attr(data-score number); /* Define type as number */
    attr(data-width px);     /* Define type as pixel */
}

.defaults {
    attr(data-src url, '');       /* Will fallback to an empty string */
    attr(data-width px, inherit); /* Will fallback to the inherited property */
    attr(data-name, 'Unknown');   /* Will fallback to "Unknown" */
}