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
I was trying to display the numeric value stored in a CSS variable inside generated content…
Turns out you can't do that.
But you can do this…https://t.co/VCJ5wa7bww
(not saying you should, but you could)
— Cassie Evans (@cassiecodes) March 19, 2019
⚠️ 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
💁♂️ On a personal note: Personally I’d consider
data-* objects instead of CSS Custom Properties to inject the unread count. Like so:
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 🙂