如何制作div叠加的两个底部边框？

Question

以下是我的html和css代码

.container {
  display: flex;
  justify-content: center;
  border-bottom-width: 2px;
  border-bottom-color: gray;
  border-bottom-style: solid;
}

.label {
  border-bottom-width: 2px;
  border-bottom-color: orange;
  border-bottom-style: solid;
}

<div class=container>
  <div class=label>
    Hello
  </div>
</div>

目前的结果是：

然而，我理想的结果是橙色边框完全覆盖.container div的灰色边框。这是一个例子。

我尝试过调整填充和边距，但是我无法达到理想的效果，因为很明显，这些更改也会改变容器的大小。

是否可以使用css实现它？

Answer 1

在margin-bottom上添加负.label等于border-bottom-width的{​​{1}}，并在必要时添加一些左/右.container：

padding

.container {
  display: flex;
  justify-content: center;
  border-bottom-width: 2px;
  border-bottom-color: gray;
  border-bottom-style: solid;
}

.label {
  border-bottom-width: 2px;
  border-bottom-color: orange;
  border-bottom-style: solid;
  padding: 0 10px;
  margin-bottom: -2px;
}