Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Link Underline (Wired-Style)
<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 wired-style links
// sample: http://www.wired.com/2015/03/feds-admit-stingrays-can-disrupt-cell-service-bystanders/
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment