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

Question

我有一个H2标签与CSS：

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

它看起来就像是：

但我想，以填补不同的边框“宽度的休息”。它必须看起来像：

Answer 1

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

DEMO：http://jsfiddle.net/neowar2x/3/

Answer 2

使用伪类:afterhttp://www.w3schools.com/css/css_pseudo_classes.asp

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; 
    position:relative; /*add this*/ 
} 

h2:after{ 
    content:''; 
    display:inline-block; 
    position:absolute; 
    width:80%; 
    background:#e6e6e6; 
    height:3px; 
    top:100%; 
}