A Pen by White Wolf Wizard.

Hyperlink-Effect.markdown

Hyperlink Effect

A Pen by White Wolf Wizard on CodePen.

License.

index.haml

%a{:href=>'#'} Just
%a{:href=>'#'} a
%a{:href=>'#'} few
%a{:href=>'#'} links
%a{:href=>'#'} with
%a{:href=>'#'} a
%a{:href=>'#'} nice
%a{:href=>'#'} effect.

style.scss

@import "compass";
$accent: #37D;
body {
  padding: 100px;
  background: #EEE;
  font-family: sans-serif;
  text-align: center;
  font-smoothing: antialiased;
}
a {
  position: relative;
  padding: 0 5px;
  color: $accent;
  text-decoration: none;
  &:after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%; height: 1px;
    margin: auto;
    background-image: linear-gradient(90deg,transparent 0%,$accent 50%,transparent 100%);
    transition: width .15s ease;
  }
  &:hover:after { width: 0; }
}