If you do a quick search online on how to transition text-decoration, whether it be it's visibility/opacity or color, you'll find a number of suggested workarounds. The most common workaround I see is using a pseudo element to apply a border under your text. You'd then transition the border-color or opacity depending on the result you're looking for. Something like the below.
a {
text-decoration: none;
position: relative;
}
a:after {
content: "";
width: 100%;
border-bottom: 1px solid #333;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 300ms ease;
}
a:hover:after {
opacity: 1;
}
While these workarounds are great and work well, we can achieve basic transition animations, including the workaround example above, by directly transitioning text-decoration. If you take a look at the MDN Web Group's list of animatable CSS properties, you'll see text-decoration
is in-fact, proudly listed on this page alongside it's color and thickness options.
It's worth noting that there are two text-decoration properties omitted in the supported animatable properties, text-decoration-line
and text-decoration-style
. So, if we attempt to change these values while transitioning our text-decoration value it'll actually break the transition all together. That said, most transition use-cases don't involve either of these properties.
So, let's take a look a couple of working examples.
Ease Underline In and Out
First, let's take a look at transitioning from no underline to having an underline. While we can't go from a text-decoration value of none to underline, because text-decoration-style isn't an animatable property, we can utilize transparency to make it appear as though this is happening.
a {
text-decoration: underline transparent;
transition: text-decoration 300ms ease;
}
a:hover {
text-decoration-color: blue;
}
You can also redefine text-decoration and it'll work just fine text-decoration: underline blue;
. You can also use this approach to ease your text-decoration from one color to another. To do this, just replace transparent
with whatever your initial text-decoration color should be.
Ease Underline Thickness
We can also use the above approach when it comes to transitioning our text-decoration thickness.
a {
text-decoration: 0 underline;
transition: text-decoration 300ms ease;
}
a:hover {
text-decoration-thickness: 10px;
}
Again, same as our previous example, this will also work just fine using the text-decoration property text-decoration: 10px underline;
.
If you want, you can also transition both color and thickness on the same line using the text-decoration property.
a {
text-decoration: 1px underline transparent;
transition: text-decoration 300ms ease;
}
a:hover {
text-decoration: 10px underline blue;
}
Let's See It In Action
While this isn't anything extraordinary it does save us some lines of CSS, reduce complexity, and free up a potential pseudo element. Below you'll find a Codepen of the three examples we discussed so you can see them working.