New Link Underline (Wired-Style)

index.html

<div class="text">Chew on cable. <a href="#">Attack feet</a> flop over, so if it fits, i sits or all of a sudden <a href="#">cat goes crazy.</a> Sleep in the bathroom sink  if it fits, i sits <a href="#">give attitude</a>, stick butt in face all of a sudden cat goes crazy.</div>

New Link Underline (Wired-Style).markdown

New Link Underline (Wired-Style)

Wired just released a re-design with interesting link underlines. I tried to recreate them real quick :)

A Pen by MrPirrera on CodePen.

License.

script.js

// new wired-style links
// sample: http://www.wired.com/2015/03/feds-admit-stingrays-can-disrupt-cell-service-bystanders/

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

/* this is for demo */
body {
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  line-height:1.8;
  margin:0;
  padding:0 40px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255,1) 0%,rgba(0, 0, 0, 0.2) 100%);
}

.text {
  color: rgba(35, 35, 35, 0.8);
  font-size: 3em;
  font-family: "Open Sans", sans-serif;
  font-style: normal;
}

/* this is the magic */
a {
  text-decoration:none;
  border-bottom: 2px solid #ef8b80;
  box-shadow: inset 0 -4px 0 #ef8b80;
  color: inherit;
  transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

a:hover {
  background: #ef8b80;
}