<head>
  <link href='https://fonts.googleapis.com/css?family=Vollkorn|Exo|Open+Sans|Roboto|Ubuntu|Josefin+Sans|Rubik:500i|Droid+Serif:400i' rel='stylesheet'/>
</head>
<body>
<h1>CSS Animated Underline Links</h1>
<a class='right' href="http://www.cssportal.com/css-properties/transition.php">From Right</a>
<br><br>
<a class='center' href="http://www.cssportal.com/blog/css-animated-underline-links/">From Center</a>
<br><br>
<a class='left' href="#">From Left</a>
</body>
body {background: #f2f2f2; margin: 50px; font:'Josefin Sans',serif}

a {font-size: 2em;text-decoration: none;position: relative;color: #3366FF;padding-bottom:0.2em}

.right:after {content: '';position: absolute;bottom: 0;right:0%;width: 0%;
  border-bottom: 4px solid #3366FF;transition: 0.4s;}
.right:hover:after {width: 100%;}

.center:after {content: '';position: absolute;bottom: 0;right:50%;width: 0%;
  border-bottom: 4px solid #3366FF;transition: 0.4s;}
.center:hover:after {width: 50%;}
.center:before {content: '';position: absolute;bottom: 0;left:50%;width: 0%;
  border-bottom: 4px solid #3366FF;transition: 0.4s;}
.center:hover:before {width: 50%;}

.left:after {content: '';position: absolute;bottom: 0;left:0%;width: 0%;
  border-bottom: 4px solid #3366FF;transition: 0.4s;}
.left:hover:after {width: 100%;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.