3 ways to add distinct underline style for the anchor tags

Add some slick underline styles to your anchor tags with these 3 ways.

1. text-decoration
2. border
3. box-shadow

1. text-decoration

The first and most obvious way is to use the text-decoration property to give your links a distinctive 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 up 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 #047cea;
}

Available styles are:

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

2. border

The border-bottom property will allow you to make underline more custom.

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

Now you can control underline's width and use styles specific only to the border property like:

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

Another benefit of using the border-bottom property is you can control the space between the text and the underline by adding a padding property.

a {
  text-decoration: none;
  border-bottom: 1px dashed #047cea;
  padding-bottom: 2px; 
}

3. box-shadow

The last one is box-shadow property. Like the border it will allow you to control the width of the underline and space between the text as well.

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

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

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

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

I've put together a collection of possible anchor tag styles on CodePen, check 'em out.

Cover photo by LUM3N on Unsplash