html - 双边框适合标题和容器

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

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

<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

最佳答案

使用负的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>

希望这可以帮助！

关于html - 双边框适合标题和容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41243504/