Displaying the (Numeric) Value of CSS Custom Properties (CSS Variables) inside Generated Content

Written by Bram.us - - Aggregated on Monday March 25, 2019
Tags: elsewhere, css, css-variables, generated-content, link

Nice hack by Cassie: she uses counter-reset as a temporary storage space so that the value of a CSS Variable it can be used inside generated content (e.g. with the content property).

Do note that this only works with numbers, as counter-reset only accepts numbers.

Jeremy has also written down a few lines on a some of the limitations when using CSS Custom Properties

Displaying numeric CSS vars in generated content Demo (CodePen) →

On a personal note: Personally I’d consider data-* objects instead of CSS Custom Properties to inject the unread count. Like so:

See the Pen
YggdRe
by Bramus (@bramus)
on CodePen.

I think it’s better place to store this kind of information (it is data, after all) and above that you’re not limited to using numbers.

Remains that this is a nice find by Cassie … I thought the time of clever CSS hacks was mostly over, turns out it’s not


« What is the Closest Planet To Earth? … - Bram.us

Bram.us - Upgrade to PHP 7.3 with Homebrew on Mac »