css - 复杂的双文字下划线

Question

所以我正在寻找一种在标题字体下划线的效果。我希望下划线拉伸标题所在的 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/

Answer 2

在这里用固定定位做到这一点。如果你尝试用所有相关的东西来做，它会变得有点时髦，但仍然有效。希望有帮助！

html:

<div class="outer">
    <div class="word">My Word</div>
</div>

CSS：

.outer {
left: 0px;
top: 0px;
height: 20px;
width: 200px;
border-bottom: 2px solid grey;
overflow: visible;
position:fixed;
}
.word {
position: fixed;
top: 0px;
width: 80px;
margin-bottom: -1px;
border-bottom: 2px solid blue;
}