Gradient Underlines

a {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #444;
  background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
 }

See the Pen Gradient Underlines by Chris Coyier (@chriscoyier) on CodePen.

Comments

asd

# August 18, 2011

yohooo

Nicklas

# October 18, 2011

Not bad!

Throw some transition into that and it’ll be even fancy-er! :)

Sarang

# April 2, 2012

Awesome Man ! Thanx Big Thanx !

Brett M

# August 20, 2013

Is there a fix for line wrapping? When my link is long enough to wrap onto the next line, the next line won’t be underlined.

Daniel Bachhuber

Permalink to comment# April 14, 2017

Is there a fix for line wrapping?

I didn’t find a solution to properly wrap the gradient, so I had to disable wrapping for the link:

a {
white-space: nowrap;
}

Shachar

# December 6, 2014

For Firefox needs -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);

rahul

# September 1, 2015

not bad.but it is only work in chrome.

Darma

# July 18, 2016

Hi, cool trick. You can make it work on other browser by adding vendor specific properties:

background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);

Mystic

# October 2, 2016

Nice trick !!

Comments

Leave a Reply Cancel reply