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.

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.

Examples

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.






Comment