CSS: Text to sit on baseline of chosen colour

Question

In the past I have struggled to achieve the effect of having text sit on a baseline of a specified colour. Today I had a bit of a luck and made some progress.

However, although my results give me the effect I was aiming for something is telling me there is an easier way to achieve the same effect.

Any suggestions would be much appreciated.

This JSFiddle demonstrates my desired effect and my current method of achieving it.

http://jsfiddle.net/leeboyce/QZ5F5/1/

<h2>
    <span>
         Is there another way to <br /> achieve this effect? <br /><br />Aim:<br /> have different coloured underline sitting on the text baseline
    </span>
</h2>

h2 {
    font-size: 2.4em;
    line-height: 1em;
    color: #f78f1e;
    font-weight: bold;
}
h2 span {
    background-color: transparent;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d2d2d2), color-stop(0%, transparent)) 0 1em;
    background: -webkit-linear-gradient(bottom, #d2d2d2 0%, transparent 1px) 0 1em;
    background: -moz-linear-gradient(bottom, #d2d2d2 0%, transparent 1px) 0 1em;
    background: -ms-linear-gradient(bottom, #d2d2d2 0%, transparent 1px) 0 1em;
    background: -o-linear-gradient(bottom, #d2d2d2 0%, transparent 1px) 0 1em;
    background: linear-gradient(bottom, #d2d2d2 0%, transparent 1px) 0 1em;
    -webkit-background-size: 100% 2.4em;
    -moz-background-size: 100% 2.4em;
    -ms-background-size: 100% 2.4em;
    -o-background-size: 100% 2.4em;
    background-size: 100% 2.4em;
} 

Answer 1

Here is another way, adding an additional span: fiddle

<h2>
    <span class="ul">
        <span class="text">Is there another way to <br />
achieve this effect? <br /><br />Aim:<br /> have different coloured 
underline sitting on the text baseline
        </span>
    </span>
</h2>

and the CSS

h2 {
    font-size: 2.4em;
    line-height: .8em;
    color: #f78f1e;
    font-weight: bold;
}
.ul {
    border-bottom:1px solid #cccccc;
}
.text{
    vertical-align:-6px;
}

HTH, -Ted

Edited to add: Here's a second fiddle just using the text-decoration:underline css, if that underline works for you another fiddle