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

Question

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

但是，尽管我的结果给出了我想要的效果，但有些东西告诉我有一种更简单的方法可以达到相同的效果。

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

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

Answer 1

这是另一种方式，添加一个额外的跨度: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>

和 CSS

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

喂， -泰德

编辑添加:这是第二个使用 text-decoration:underline css 的 fiddle ，如果该下划线适合您的话 another fiddle