Question

我正在寻找为标题创建双色边框的解决方案。边界的第一部分应覆盖标题，边界的第二部分首先覆盖容器的其余部分。

我目前正在使用以下标记和样式：

<h4 class="title"><span>This is a heading</span></h4>

h4.title span{
border-bottom: 1px solid red;
display: inline-block;
}

h4.title{
border-bottom: 1px solid green;
}

除了边界现在彼此之下而不是彼此相邻之外，这几乎得到了理想的结果。

已经尝试使用:after解决此问题，但此边框从未显示，可能是由于标题的display: block

Answer 1

使用否定margin-bottom，例如：

h4.title span{
  border-bottom: 1px solid red;
  display: inline-block;
  margin-bottom: -1px;
}

查看下面的工作代码段：

h4.title span{
  border-bottom: 1px solid red;
  display: inline-block;
  margin-bottom: -1px;
}

h4.title{
  border-bottom: 1px solid green;
}

<h4 class="title"><span>This is a heading</span></h4>

希望这有帮助！

Answer 2

您可以使用范围上的:after伪选择器完成此操作，并将绿色边框应用于父h4。

h4.title {
  border-bottom: 1px solid green;
}

h4.title span {
  display: inline-block;
  position: relative;
}

h4.title span:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: red;
}

<h4 class="title"><span>This is a heading</span></h4>

Answer 3

您也可以在父元素上使用background-image。子元素的边框最终会隐藏父背景。

h4.title {
  background: linear-gradient(to right, green, green) no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

h4.title span {
  border-bottom: 1px solid red;
}

h4.title span {
  border-bottom: 1px solid red;
  display: inline-block;
}

h4.title{
  background: linear-gradient(to right, green, green) no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

<h4 class="title">
  <span>This is a heading</span>
</h4>

适合航向和集装箱的双边框

3 个答案: