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.


  1. asd
    Permalink to comment#


  2. Nicklas
    Permalink to comment#

    Not bad!

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

  3. Sarang
    Permalink to comment#

    Awesome Man ! Thanx Big Thanx !

  4. Brett M
    Permalink to comment#

    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.

  5. Shachar
    Permalink to comment#

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

  6. rahul
    Permalink to comment#

    not bad.but it is only work in chrome.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.