Link Style Tests

index.html

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  
<div class="one">
  <a href="#">Hyperlink</a>
  <a href="#">Another</a>
  <a href="#">One More</a>
</div>
  
<div class="two">
  <p>This is what a <a href="#">Hyperlink</a> would look like in a normal paragraph. Here is some dummy text to test how a <a href="#">link</a> will appear within copy. Here is one more link <a href="#">just for fun</a>.</p>
</div>

Link Style Tests.markdown

Link Style Tests

A Pen by Nick Ciliak on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  margin: 0;
}

.one {
  margin: 50px auto 20px auto;
  padding: 10px;
  border-bottom: 2px solid #eee;
  width: 500px;
}

.two p {
  font-family: 'Lato';
  font-size: 18px;
  font-weight: 300;
  line-height: 32px;
}

.one a {
  font-family: 'Lato';
  text-decoration: none;
  font-size: 26px;
  color: #000;
  font-weight: 900;
  margin: 0 20px 0 0;
  position: relative;
}

.one a:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  content: '';
  -webkit-transform: translateY(8px);
  opacity: 0;
  transition-property: -webkit-transform, opacity;
  transition-duration: .3s;
}

.one a:hover:before {
  -webkit-transform: translateY(0);
  opacity: 1;
}

.two {
  margin: 0px auto;
  width: 500px;
}

.two a {
  font-family: 'Lato';
  text-decoration: none;
  font-size: 18px;
  color: #000;
  font-weight: 300;
  margin: 0 2px;
  position: relative;
}

.two a:before {
  position: absolute;
  margin: 0 auto;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  content: '';
  opacity: .3;
  -webkit-transform: scaleX(.9);
  transition-property: opacity, -webkit-transform;
  transition-duration: .3s;
}

.two a:hover:before {
  opacity: 1;
  -webkit-transform: scaleX(1);
}