Grow your CSS skills. Land your dream job.

Last updated on:

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

  1. asd
    Permalink to comment#

    yohooo

  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%);

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".