A better-looking alternative to text-decoration

09.27.2013 by Ilia Raiskin
Quick HTML CSS Typography

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.


Solid Line

Dotted Line

CSS Transitions

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.