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
Check it out:
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.