Spacing between text and underline

Question

I am looking for a way to increase the distance between text and underline on my pages. I use mostly CSS, but I also had to use tags, basically my question addresses both cases. is there any way to change this interval? the code is pretty simple:

.title_span { font-weight: bold; text-decoration: underline; color: grey; } 

my other possibility is to try to somehow use the background for the range using a 1px image and repeat with the x axis. I'm looking for a cleaner solution.

Answer 1

Not without tricks, no. One simple solution is to wrap the text in a different range and give a lower border.

 <span class="underline"><span class="title_span">title of something</span></span> .title_span { font-weight: bold; text-decoration: underline; color: grey; } .underline { padding-bottom: 2px; border-bottom: grey 1px solid; } 

http://jsfiddle.net/m9RQ9/

Answer 2

I'm afraid this is not possible for every word, but what you can do is use border-bottom as an alternative to background-image

Answer 3

the distance between the text and underline it No, but you can go with something like border-bottom: 1px solid # 000 and padding-bottom: 3px.

edit: if you need the same underline color (which in my example is the border), you just don’t specify the color declaration, that is, border-bottom-width: 1px and border-bottom-style: solid.