Transitions to me are very important. Even a very slight ease of .2s can make a difference for the user. The sad part about CSS3 is the inability to animate the underline in text. However, there is a work around: create a block that looks like an underline.
Using the :after pseudo and setting the an empty content attribute to the selector will create a fake block under the text. It will however not be visible yet, so we’ll have to force it out by using position: absolute. Next, fix the location to the bottom left at 0% and set the height and width.