Quick Tip: You Can Transition Text Decoration, A Little

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;
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

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;
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

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;
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

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;
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

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.