spacing between text and underline

Question

I am looking for a way to enlarge the distance between the text and underline on my pages. i use mainly CSS but i had to use tags as well, basicly my question considers both cases. is there a way to change this spacing? the code is pretty simple:

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

my other posibility is try somehow use background for the span using 1px picture and repeat against X axis i am looking for cleaner solution.

Answer 1

Not without tricks, no. One simple solution is to wrap the text in another span and give that a bottom 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/