Skip to content

Instantly share code, notes, and snippets.

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:
@import url(;
/* this is for demo */
body {
height: 100vh;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
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 {
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