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