双边框宽度不同

Question

我正在尝试使用CSS - 实现双边框，理想情况下不使用额外的元素。

我最初的想法是将第一个边框应用于容器元素，将第二个边框应用于下面的title元素。

.box {
  border-top: 1px solid black;
}
h2 {
  float: left;
  border-top: 2px solid red;
  margin-top: 0;
  padding-top: 10px;
  padding-right: 5px;
}

<div class="box">
  <h2>Title</h2>
  <p>Some text here</p>
</div>

这里的主要问题是要求可能是小边框的宽度与文本的宽度无关。此外，我们可能会遇到行高/垂直文本对齐问题。

这个问题还有其他可行的解决方案吗？

Answer 1

我希望下面的CSS代码可以帮到你。

.box{
  border-top: 2px solid gray;
}

h2{
  width: 200px;
  height: 300px;
  border-top: 2px solid red;
  position: absolute;
  top: -12px;
}