Animating underline link Hover Effect

Written by Tinjure WP Posted on

While working on My Notes site, I wanted to tweak index & archive pages layout slightly so that it displays with sidebar but single posts and pages without side bar. The posts display on home/archive pages is inspired by Tale – Jekyll theme and wanted to add similar hover animation in my posts as well.

Initially I thought that it was simple enough to add such animation but after some research and reading some tutorial blog posts, realized that that it is not so simple and easy that originally thought.

Following my learning by doing principles, I decided to take a little distraction from my JS learning routine and decided to learn & implement the hover style in my theme as well.

Step by step guide
A simple Example

The following is a simple animating hover link code snippets

<!--HTML Markup -->
<div class="link-title">
    <h5><a href="#">My Link Hover Title</a></h5>
    <p> Ny <a href="#">Jump Link</a>text goes here</p>
    <p> Ny <a href="#">Another Jump Link</a> text goes here</p>
</div>

For a demo link, please click below:

DEMO

Step 1: Select anchor link element for hover state animation underline link

  • Remove the underline decoration (text-decoration: none as shown in line 4).
  • Set the position to relative (line 6).
/* for link animation */
.link-title a {
    color: #566473;
    text-shadow: none;
    font-weight: 700;
    text-decoration: none;
}

Step 2: Create pseudo element (::after) to define link state as follows:

  • Set position to absolute.
  • Use transition property to define underline animation.
  • Animation direction can be define by left (left to right), right (right to left) etc
  • Underline effect is achieved with background-color & height property. the width property is generally defined zero (to completely hide) or set a width value (to show some width) under normal state.
/* for link at normal state */
.link-title a::after {
    position: relative;
    display: block;
    content: '';
    left: 0;
    width: 3em;
    height: 4px;
    background-color: #566473;
}

Step 3: Set the definition for hover and focus state as follows:

  • The position property is set to relative.
  • The width property is set to 8em (it could set in % & adjust accordingly).
  • The transition property, which determines underline animation, is generally set to .3s (normal speed) or other values.
/* animation for focus & hover state */
.link-title a:hover::after,
.link-title a:focus::after {
    position: relative;
    background-color: blue;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
    width: 8em;
    height: 4px;
}

The transition and other properties are described in example 3 below.

Example 2

The following example adopted from Martin Wolf’s CodePen titled Link Hover Effect: Animate Border Bottom example. This codepen resource for animating link uses simple snippets yet very neat technique for adding animation at hover state.

HTML structure of the example (above):

<!-- HTML structure -->
<ul>
 	<li><a class="cool-link" href="#">A cool link</a></li>
 	<li><a class="cool-link" href="#">A cool link</a></li>
 	<li><a class="cool-link" href="#">A cool link</a></li>
</ul>

It is styled using following CSS style:

/* source: https://codepen.io/martinwolf/pen/eNNdme */
li {
    margin-bottom: 10px;
}
.cool-link {
    display: inline-block;
    color: #000;
    text-decoration: none;
}
.cool-link::after {
    content: '';
    display: block;
    width: 2rem;
    height: 3px;
    background: #000;
    transition: width .3s;
}
.cool-link:hover::after {
    width: 100%;
   /*transition: width .3s; */
}
Example 3

The following hover animation code snippets from adding CSS animation by Ray Villalobos (lynda.com).

/* Animate an underline when hoover */
.site-header .nav-link {
    position: relative;
}
.site-header .nav-link:before {
    content: "";
    position: absolute;
    width: 100%;
    max-width: 100px;
    height: 2px;
    bottom: 8px;
    left: -50%;
    background-color: rgba(255,255,255,1);
    opacity: 0;
    transform: scalex(0);
    transition: all .3s ease-in-out 0s;
}
.site-header .nav-link:hover:before {
    opacity: 1;
    left: 0;
    transform: scalex(1);
}

Brief definition of normal & hover state animation using pseudo-element properties and/or values:

  • Position:  specifies the type of positioning method used for an element (eg. static, relative, absolute, fixed, or sticky). The relative value refers to its normal position, normal flow of the document, while absolute value refers to its closet positioned ancestor (i.e. parent element).
  • Width and max-width: maximum width of link line.
  • Height: refers to thickness of the link line.
  • Left: refers to starting position of link line (-50% refers to its hidden, no link line visible at normal state). The ease-in-out refers a transition effect with a slow start and end.
  • Opacity: Link line visibility is determined by opacity value (0, invisible, 1 is 100%).
  • Transformation & transition:  The animation is achieved through transformation & transition properties values. The all refers to both width & height, second value .3s refers to speed (0 to 1 scale, 0 slow to 1 fastest) and third value (eg. 0s) refers to delay. The transform refers to the coordinate space of the CSS (according to the parameters given for the X-axis and the Y-axis). The scalex(n) value refers to changing the element’s width.

In the example above, link hover state animation is achieved by changing its opacity value, starting position (left).

Tip: When combining positioning in two elements, position: relative (a natural order) should be given to parental element and position: absolute (relative to parental element) should be given to children elements.

Some Useful Resources & Links

During this animation learning process, I found following resources and links useful