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

【问题标题】：How to add 2 border colors using pseudo elements or without using extra markup?如何使用伪元素或不使用额外标记添加 2 种边框颜色？
【发布时间】：2015-03-19 01:41:16
【问题描述】：

我放弃了……

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

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

请运行代码 sn-p 来查看我的目标。红色边框的长度是文本标题的长度。我怎样才能在不添加跨度或任何标记的情况下实现这一点？我尝试将灰色边框添加到伪元素 ::before 但它只会使红色边框的长度加倍，灰色边框应该填充框的其余部分。请帮我玩。谢谢！

【问题讨论】：

之前有人问过这个问题：stackoverflow.com/questions/15230888/…
只是有点相似... :)

标签： html css

【解决方案1】：

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

这两个伪元素都绝对定位于父元素的顶部相对。对于红色边框，关键是将父元素设置为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>

【讨论】：

谢谢，如果灰色边框会跟随它的长度，我会尝试调整包装器。
这可能是迄今为止最好的解决方案。我只需要调整 h2:before 的宽度。谢谢老兄。
@wjR。好主意，这是一个很好的答案。 +1。比我的好，没想到给h2元素本身加了红色边框。

【解决方案2】：

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

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

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

【讨论】：