html - 如何在 CSS 中为标题创建响应式底部边框？

Question

我希望在 CSS 中复制以下设计:

到目前为止，我已经完成了以下工作:

.bb-title::before{
  content:'';
  position: absolute;
  background-color: #7D18FD;
  width: 25%;
  height: 3px;
  bottom: 0;
}

<h2 class='f2 mt4 bb-title relative'>
  What people are saying
</h2>

但这不是响应式的。

参见 Codepen .

在标题上实现底部边框的最佳方法是什么，边框始终与标题宽度相同？

Answer 1

按照以下步骤:

.bb-title {
    position: relative;
    display: inline-block;
}
.bb-title::before {
   content: '';
   position: absolute;
   background-color: #7D18FD;
   width: 100%;
   height: 3px;
   bottom: -5px;
   left: 0;
   right: 0;
}