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

这是固定定位here吗？如果你尝试用相关的一切做到这一点，它会变得更有趣但仍然有点工作。希望有所帮助！

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

复杂的双文字下划线

2 个答案: