css - 复杂的双文本下划线

Question

所以我希望创建一种标题字体带有下划线的效果。我希望下划线拉伸(stretch)标题所在的 div 的宽度。但我希望文本正下方的下划线区域采用单独的颜色。所以在文本下面它应该是蓝色的，但是当下划线不再在文本下面时，它应该是灰色的。我在想一个双边框系统会起作用，但我不确定是否可以只用 CSS 来做到这一点......是吗？

Answer 1

这是另一个快速解决方案。将 500px 更改为您想要的任何值，可以是百分比。

HTML

<div class="blue">
    Header
</div>
<div class="grey">
    &nbsp;
</div>
<div class="clear">
</div>

CSS

.blue {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid blue;
    float: left;
    overflow: hidden;
    position: absolute;
    z-index: 0;
}

.grey {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid grey;
    float: left;
    width: 500px;
    overflow: hidden;
    position: absolute;
    z-index:-1;
}

.clear {
    clear: both;
}

示例:http://jsfiddle.net/UuYvv/