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