DEV Community

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

Posted on

5

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay