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

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
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 🙂

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.