在CSS中阻止不同颜色的边框+文本边框

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/

Answer 2

更新

我错过了span内部您不需要h3。我添加了一个解决方法。我不确定这是否是唯一的解决方案。但我认为它可以改进。在下面的代码中，我使用css content属性来隐藏容器的边框。

注意：使用尽可能多的点.，以使其适用于所有分辨率。

<强> CSS

.container {
    border-bottom: 1px solid red;
    padding-bottom: 10px;
    position: relative;
    max-width: 100%;
    word-break: break-all;
}
.container:after {
    content:"....................................................................................................................";
    color: transparent;
    border-bottom: 1px solid green;
    padding-bottom: 10px;
    position: absolute;
    bottom: -1px;
}

<强> Working Fiddle

Answer 3

灰色线需要在块级标签上，而绿色需要在内联标签上。这意味着您需要两个嵌套标记才能生效，并且必须在span内部添加h3或在div周围添加h3。如果需要，h3始终可以内联。

稍微不同的方法是在h3之外添加辅助元素而不包围它，并将其定位，使其直接位于{{1}}之下。

在任何情况下，您都需要至少两个元素来保持边框。

Answer 4

例如这段代码:(显然不使用绝对位置）

HTML：

<h3><span>Recent episodes</span></h3>

CSS：

h3{
    text-transform:uppercase;
    border-bottom:1px solid #ccc;
}

h3 span{
    display:inline-block;
    border-bottom:1px solid #080;
    margin:0 0 -1px 0;
}

http://jsfiddle.net/tp0nnapu