By default, most browsers use a one-line underline to display the links on our website. Style sheets CSS allow us to modify this behavior and provide the elements of a page (links included) with the design that we like the most.
In this case we are going to make the link underline a dotted line. To have a dotted underline in CSS we are going to rely on the border-bottom property. Using this property we can style the bottom border of an element. In the case of a link, the bottom border of an element matches its underline.
All properties CSS of the links we will assign them to element A. To do this we will create, in the header of the page, some style tags:
The first thing we have to do to have a dotted underline in CSS is to remove the element’s default underline. The underlining of the link is reflected by the text-decoration property. To eliminate the underline we assign it the value of none.
a {
text-decoration:none;
}
Now we are going to define the dotted underline in CSS. The border-bottom has three values separated by blanks. Width, style and color. The dot style is “dotted”. In this way, if we want to define a width of 1px it would be the following code:
a {
border-bottom:1px dotted #9999CC;
text-decoration:none;
}
We will only have to add a link to our website and we already have the dotted underline in CSS.