The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Gradient Underlines

Last updated on:
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>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed