Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …

Multi-line gradient links

Zell Liew deconstructed and recreated the gradient links as seen on CSS-Tricks When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project. The result looks like this: Uses the aforementioned box-decoration-break to span styles across multiple …

text-decoration-* CSS Properties Coming to Firefox

Glad to see this announcement by Mozillian Daniel Holbert: As of today (Sept 12 2019), I’ve turned on support for the CSS properties text-decoration-skip-ink, text-decoration-thickness, and text-underline-offset, on all platforms. As posted before, text-decoration-skip-ink gives you nicer underlines. The other two properties allow one to tweak the position and color of the underline. CSS Tricks …