❌ w/o extended `attr()` features — using `data-` attr workaround
```html
<button
aria-label="Some label here"
data-label="Some label here"
>
Button
</button>

<style>
button:hover::after,
button:focus::after {
    /* FALLBACK VALUE NOT SUPPORTED */
    content: attr(data-label);
}
</style>
```

❌ w/o extended `attr()` features — using CSS custom properties workaround
```html
<button
aria-label="Some label here"
style="--label: 'Some label here'"
>
Button
</button>

<style>
button:hover::after,
button:focus::after {
    content: var(--label, "default label");
}
</style>
```

✅ w/ extended `attr()` features

```html
<button aria-label="Some label here">Button</button>

<style>
button:hover::after,
button:focus::after {
    content: attr(aria-label, "default label");
}
</style>
```

❌ w/o extended `attr()` features — using `data-` attr workaround
```html
<div data-size="100" style="width: 100px; height: 100px;"></div>

<style>
div {
    background-color: cyan;
    /* VALUE TYPE-CASTING NOT SUPPORTED */
}
div::after {
    content: "Size: " attr(data-size);
}
</style>
```

❌ w/o extended `attr()` features — using CSS custom properties workaround
```html
<div style="--size: 100px; --size-label: '100';"></div>

<style>
:root {
    /* Coupling variables creates risk of mismatched values */
    --fallback-size: 50px;
    --fallback-size-label: "50";
}
div {
    background-color: cyan;
    /* VALUE TYPE-CASTING NOT SUPPORTED */
    width: var(--size, var(--fallback-size));
    height: var(--size, var(--fallback-size));
}
div::after {
    content: "Size: " var(--size-label, var(--fallback-size-label));
}
</style>
```

✅ w/ extended `attr()` features

```html
<div data-size="100"></div>

<style>
:root {
    --fallback-size: "50";
}
div {
    background-color: cyan;
    width: attr(data-size px, var(--fallback-size));
    height: attr(data-size px, var(--fallback-size));
}
div::after {
    content: "Size: " attr(data-size, var(--fallback-size));
}
</style>
```