Search
When to Avoid the text-decoration Shorthand Property
25.2.2022
In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and widely-supported CSS properties that give us more control over the styling of underlines.
Let me demonstrate the usefulness of …
When to Avoid...
The CSS from-font Value Explained in 4 Demos
21.1.2022
I was doing my Advent of UI Components, and I stumbled upon the from-font value for the text-decoration-thickness CSS property. I was curious about it, so I did a little research and I think what I found (and learned) …
The CSS from-font Value Explained in 4 Demos originally published...
CSS Underlines Are Too Thin and Too Low in Chrome
4.1.2022
I’ve encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties, and I want to share them with you here in this article.
But first, let’s acknowledge one thing:
Default underlines are inconsistent
Let’s add a …
CSS Underlines...
A CSS-only, animated, wrapping underline
21.8.2020
Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead,...
Link Underlines That Animate Into Block Backgrounds
23.9.2019
It's a cool little effect. The default link style has an underline (which is a good idea) and then on :hover you see the underline essentially thicken up turning into almost what it would have looked liked if you used a background-color on the link instead.
Here's an example of the effect on...
Decorating lines of text with box-decoration-break
8.5.2018
An institution’s motto, an artist’s intro, a company’s tagline, a community’s principle, a service’s greeting… all of them have one thing in common: they’re one brief paragraph displayed on a website’s home page — or at least the about page!
It’s rare that just one word or one line of text...