Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Caleb King
Caleb King
32,777 Points

How do you add space to underline in CSS

I'm trying to add an underline for my text.

At first I used text-decoration: underline but I want some space between the bottom of the text and the underline itself.

Any ideas?

2 Answers

Philip G
Philip G
14,601 Points

Use something like this:

.underlined_text {
      border-bottom: solid 2px #000;
      display: inline;
      padding-bottom: 3px;
}
Aaron McColough
Aaron McColough
14,149 Points
Aaron McColough
Aaron McColough
14,149 Points

I have a personal example that may not be what your looking for but it is an option. In order to add some customization I used a div as the underline. I had a two word phrase and only wanted the first word underlined, so using a div worked fine. In order to adjust the gap I just adjusted the line height of the text itself. Increased the line height to get a larger gap.

Philip G
Philip G
14,601 Points

Why didn't you wrap the word which should be underlined in a span and then selected it with CSS?