CSS Animated Underline Hover for Links


Create a CSS animated underline hover for a more unique hover underline than the boring default browsers with CSS only.
This snippet has been on my CodePen for quite awhile and has gotten some attention so naturally thought I’d put here. It’s quite a simple but effective visual effect for a main navigation. Size and white space can easily be changed with padding / margin.

Code for animated underline hover

The code should be straight forward and actually quite short.

HTML

<ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS

ul {
  margin: 150px auto 0;
  padding: 0;
  list-style: none;
  display: table;
  width: 600px;
  text-align: center;
}
li {
  display: table-cell;
  position: relative;
  padding: 15px 0;
}
a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after {
  width: 100%;
  left: 0;
}

Live Preview

See the Pen Animated Underline Hover by Justin (@jstn) on CodePen.

Justin Mathew

A front end web developer specializing in HTML/CSS, JS, PHP & MySQL with over 10 years experience in the web development field.