html - 如何将两种颜色应用于标题标签的底部边框？

我在CSS中有一个h2标签：

h2 {
    display: inline-block;
    border-bottom: 3px solid #ffcc00;
    padding-bottom: 30px;
    color:  #5e5e5e;
    font-size: 23px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    margin: 30px 3px; }

看起来像这样：



但是我想用其他边框填充“其余宽度”。它必须看起来像这样：

最佳答案

的HTML

<h2>
    <span>Some header</span>
</h2>

的CSS

h2 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: lightgray;
}

span {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: orange;
    padding: 30px 3px;
    margin: 0 0 -2px 0;
    display: inline-block;
}

演示：http://jsfiddle.net/neowar2x/3/

关于html - 如何将两种颜色应用于标题标签的底部边框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33582940/