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 lines along with
text-decoration-color to tweak the color of the line below the link.
background: linear-gradient(120deg, #ab4e19, #c99a2e);
Multi-line gradient links →
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-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 recently published a good post on how to use them.
The features are now in Nightly and will be included in Firefox 70 🙂
“Intent to ship” Announcement →
Nicer CSS underlines with
text-decoration-skip-ink: auto; →
Styling Links with Real Underlines →