Underline links
Text-decoration is the default way to underline links but if use the border CSS property, we can style our links with much more flexibility.
I'm a link with text-decoration:underline
As you can see it looks ok but the line is very close to the actual text. Let's try it with a border bottom instead:
I'm a link with border-bottom:1px solid
Looking better as there is a clear gap between the text and the line. We can also further enhance our links with different patterns:
I'm a link with border-bottom:1px dotted
This gives us much more variety and we can end up doing something like the following:
a, a:visited {
border-bottom:1px dotted;
text-decoration:none;
} a:hover {
border-bottom:1px solid;
text-decoration:none;
}
I'm a link with border-bottom:1px dotted and a border-bottom:1px solid after hovering over me.
Always use border-bottom to underline links as you get a lot more freedom for styling.
