Question

我放弃了......

＆＃13;

.wrapper {
     border: 1px solid #aaa;
     width: 300px;
     height: 300px;
     padding: 20px
}
h2 {
     border-bottom: 2px solid #ddd;
     display: block;
}
h2 span {
     border-bottom: 2px solid #f00;
     display: inline-block;
     margin-bottom: -2px;
}

＆＃13;

<div class="wrapper">
  <h2><span>TITLE HERE</span></h2>
</div>

＆＃13;

请运行代码段以查看我的目标。 RED边框的长度是文本标题的长度。如何在不添加范围或任何标记的情况下实现这一目标？我尝试将灰色边框添加到伪元素::之前，但它只加倍红色边框的长度，灰色边框应填充框的其余部分。请帮我玩吧。谢谢！

Answer 1

这是一个使用两个伪元素的选项。

两个伪元素绝对位于 relative 到父元素的顶部。对于红色边框，关键是将父元素设置为inline-block，以使其具有“缩小到适合”的宽度。不幸的是，这种方法要求第二个伪元素的硬编码宽度等于.wrapper元素的宽度。

Example Here

.wrapper {
    border:1px solid #aaa;
    width:300px;
    height:300px;
    padding:20px
}
h2 {
    display: inline-block;
    position: relative;
}
h2:before,
h2:after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
}
h2:after {
    border-bottom: 2px solid #f00;
}
h2:before {
    border-bottom: 2px solid #ddd;
    width: 300px;
}

<div class="wrapper">
    <h2>TITLE HERE</h2>
</div>

Answer 2

我试图推动它，并提出了这个解决方案。我使用index-1和2作为图层顺序。 Josh的解决方案很好，但它不支持text-align属性。我需要text-align：特别正确。不使用z-index在这里运行时似乎没问题，但是当我将它应用到我的设计中时，如果没有它，它将无法工作。

＆＃13;

.wrapper {
    border:1px solid #aaa;
    width:500px;
    height:300px;
    padding:20px
}
h2 {
    display:inline;
    border-bottom: 2px solid red;
    z-index:1
}
h2:after {
    content: '';
    display:block;
    width: 100%;
    border-bottom: 2px solid #ddd;
    margin-top:-1px;
    z-index:2
}

＆＃13;

<div class="wrapper">
<h2>TITLE HERE</h2>
</div>

＆＃13;

如何使用伪元素添加2个边框颜色或不使用额外的标记？

2 个答案: