Default HTML links have a distinct style that lets the user know it’s clickable text. Usually, links have a blue color and an underline, upon hover a pointer cursor is shown.

However, other elements besides text can be a link (image, button, etc). But in this guide, I’ll cover approaches to custom-style text links to show an underline. There are three ways to do so, by using:

• Text decoration
• Border
• Box shadow

Text decoration

The first and most obvious way is to use the text-decoration property to give your links a distinct style. The text-decoration property is a shorthand that “sets the appearance of decorative lines on text”.

This property will set text-decoration-line, text-decoration-color, text-decoration-style. However, it can take from one to three parameters.

a {
  text-decoration: underline;
}

You can add more unique styles by throwing in the color and style properties:

a {
  text-decoration: underline dotted #da28e0;
}

Result:

Click here

Available underline styles are:

• solid;
• double;
• dotted;
• dashed;
• wavy.

To specify the space between the underline and text use the text-underline-offset property.

a {
  text-underline-offset: 5px;
}

Result: Click here

The text-decoration also allows you to set the width/thickness of the underline via the text-decoration-thickness

a {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

Result: Click here

Finally, the text-decoration property can be animated. For example, you can hide an underline on hover with a transition.

a {
    text-decoration: underline solid currentColor;
    transition: text-decoration-color .2s ease-in-out;
}

a:hover {
  text-decoration-color: transparent;
}

Result: Click here

Border

You can also use the border-bottom property to make the link’s underline style even fancier. But you have to set the text-decoration to none, to avoid duplicate underline.

a {
  text-decoration: none;
  border-bottom: 1px dashed #da28e0;
}

Result: Click here

Same as with the text-decoration you can control the underline’s width, color, and styles that are specific only to the border property like:

• dotted;
• dashed;
• solid;
• double;
• groove;
• ridge;
• inset;
• outset.

To control the space between the text and the underline you can add a padding property.

a {
  text-decoration: none;
  border-bottom: 1px dashed #da28e0;
  padding-bottom: 5px; 
}

Result: Click here

To make your underlines unique and fancy, you can apply gradient colors. The border can have gradient colors, to set it you can use the border-image property.

a {
  text-decoration: none;
  border-bottom: 3px solid;
  border-image: linear-gradient(45deg, purple, orange) 1;
}

Result: Click here

Box shadow

The last one is the box-shadow property. Same as the border it will allow you to control the width of the underline and space between the text as well. The text-decoration has to be set to none.

a {
  text-decoration: none;
  box-shadow: 0 2px #da28e0;
  padding-bottom: 3px;
}

Result: Click here

Along with other properties like blur and spread which can create some funky glowing effects.

a {
  text-decoration: none;
  box-shadow: 0 5px 4px -3px #047cea;
}

Result: Click here

Remove the underline

To remove the underline from a link you’ll need to set the corresponding CSS property to none. In some cases, you’ll need to unset all the above rules to none.

This is especially true for 3rd party environments like WordPress, as themes and plugins developers may use one of the above approaches. So to make sure you’ve removed the underline for good you can set all three rules to none:

a {
  text-decoration: none;
  border: none;
  box-shadow: none;
}

Conclusion

To conclude, if you want something more than a default underline styling use border or box-shadow properties. These properties also allow using transitions on them so you can get creative with hover effects. 😉

I’ve put together a collection of possible link underline styles on CodePen, check ‘em out.

See the Pen Link hover effect collection by Nikita Hlopov (@nikitahl) on CodePen.