CSS:位于所选颜色基线上的文本

在过去,我一直在努力实现让文本位于指定颜色的基线上的效果。今天我运气不错,取得了一些进步。

然而,尽管我的结果给了我想要达到的效果,但它告诉我有一种更容易的方法来达到同样的效果。

如有任何建议,我们将不胜感激。

这个JSFiddle演示了我想要的效果和我目前实现它的方法。

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;
}