CSS Transition for Text Decoration

I'm not sure why I didn't come across this sooner, but this morning I noticed that the transition property on my a tags didn't have any affect on the text-decoration changing from text-decoration: none; to text-decoration: underline;.

Check it out:

See the Pen CSS Transition on text-decoration by Mark Rabey (@MarkRabey) on CodePen.

Here I just created a very basic example to illustrate what I was seeing.

As it turns out, text-decoration is not one of the properties that can be animated at all, including transitions. So, I went another route. By applying a bottom border instead, I can simulate an underline, and I can animate it.

See the Pen CSS Transition on text-decoration - using bottom-border by Mark Rabey (@MarkRabey) on CodePen.

As you can see, now I have an underline that fades in and out too. The timing is a little off between the text and the border, but that's likely because of the long time I set. But I only set it that long to demonstration purposes. In my actual use, I'm not noticing a difference at all. You'll also see that on the a tag without :hover I have applied a border with the color set to transparent. This is so that on :hover the border has something to transition from and back to without this, on :hover the bottom border would simply appear after the set transistion time. Not at all the desired affect in this case.

There you go - something quick, as promised in my previous post.