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.
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.