css - CSS中不同颜色的 block 边框+文本边框

Question

我正在尝试在 CSS 中实现这一点:

我希望绿线始终是文本的宽度(没有固定宽度)。我有一个约束，tex 包含在 H3 标签中，无法在其中添加 span 标签。

Answer 1

你也可以试试这个方法:

<div class="container">
    <div class="line"></div>
    <h3>RECENT EPISODES</h3>    
</div>


.container {
    width:100%; 
    position:relative;
}
h3 {
    display:inline-block;
    border-bottom:1px solid green;
    padding-bottom:10px; 
    margin:0;
    position:relative;

}
.line {
    height:1px;
    background-color:#ededed;
    width:100%;
    position:absolute;
    bottom:0;
}

http://jsfiddle.net/az6pr1mz/