Working on a native CSS mixin that would allow to easily debug any other custom properties in CSS by outputting their value into

::after

pseudo-element. It is sometimes frustrating doing various complex calculations in CSS while not seeing the result itself (without applying it to something), and without looking into devtools (which is nice, but can be slow). So, being able to just output some CSS variable, calculation, viewport, or container unit for any element just by assigning a single CSS variable will be very useful. (the code for achieving this is overcomplicated — but 100% fine for debugging purposes; I'll try to write an article about it in the next few weeks)

That's wild. Can't wait to see the technique. Is it using

attr()

?

Nope! In the screenshot, the left part is displayed with

attr()

, but the right part is “calculated” from the value of the variable and then output as CSS counters. Basically, the only way to output values from variables in CSS into

content

, and there is a lot going on in order to achieve this haha.