Many web designers prefer the clean look of non-underlined links, but make it easier for the reader to determine what’s a link and what isn’t by using the a:hover pseudo-class to add an underline that appears when the reader hovers the mouse over the link:
To kick things up a notch and add a bit of flair to your links, you can animate the underline with some extra CSS code. Here’s a demo:
Here’s how the CSS works:
Line 9:
.animated-underline
Specifies the class selector for the
<a> tag.
Line 10:
position: relative
Sets up a positioning context for the
::after pseudo-element, described next.
Line 12:
.animated-underline::after
Creates a pseudo-element that gets added after the link.
Line 13:
content: ''
Tells the browser to add the pseudo-element without any content.
Line 14:
position: absolute
Positions the pseudo-element absolutely with respect to the link (since earlier we styled the link with
position: relative to create the positioning context).
Line 15:
bottom: 0
Sets the initial vertical position of the element.
Line 16:
left: 0
Sets the initial horizontal position of the element.
Line 17:
height: 2px
Sets the height of the element. This is, in effect, the width of the underline.
Line 18:
width: 100%
Sets the width of the element to the width of the link text.
Line 19:
background-color: darkmagenta
Styles the color of the underline.
Line 20:
transform: scaleX(0)
Hides the underline initially by scaling it to a width of 0.
Line 21:
transform-origin: center
Sets the starting point of the transform to the center of the link text.
Line 22:
transition: transform .25s linear
Sets up a transition animation on the element. The animation will only affect the
transform property and will take .25 seconds with linear easing.
Line 24:
.animated-underline:hover::after
Sets up the
:hover pseudo-class for the link, which gets applied when the user hovers the mouse pointer over the link text.
Line 25:
transform: scaleX(1)