A better-looking alternative to text-decoration
In this quick tip I'm going to show you a simple, better-looking alternative to the CSS text-decoration
property that also adds more options.
HTML
In this article I'll use the following code for an HTML-link:
First of all we have to remove the real text-decoration
from all links:
Now the trick comes! We just use border-bottom
. You will notice that border-bottom
creates a line that is a bit farther away from the text than the text-decoration
-line. I, myself think that it looks better when there is some extra space between the line and the text. Border-bottom
has lots of advantages: You can use a separate color for the line, you can use different border styles and widths and you can animate it with CSS transitions.