DEV Community

Cover image for 3 ways to add distinct underline style for the anchor tags
Nikita Hlopov
Nikita Hlopov

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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

a {
  text-decoration: underline dotted #047cea;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)