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