Add some slick underline styles to your anchor tags with these 3 ways.
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
Top comments (0)