CSS边框底部问题[重复]

Question

我想要一个分隔标题和文本的边框，我有它，但它是 h2 的 100%，我希望它像 80% 一样位于中心。

我尝试将 h2 分开，但如果我添加 80% 的宽度，它会使 h2 成为整个 div 的 80% 宽度。 PS 我希望这段代码能显示我想要的方式。

.about-section .title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px; 
  font-size: 20px;
}
.title h2 {
  border-bottom: 3px solid #fe9004;
  padding-bottom: 3px;
}

Answer 1

您可以使用伪元素:after 来实现：

.about-section .title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px; 
  font-size: 20px;
}
.title h2 {
  position: relative;
}
.title h2:after {
  content: '';
  display: block;
  height: 3px;
  width: 80%;
  position: absolute;
  bottom: -10px;
  left: 10%;
  background-color: #fe9004;
}

<div class="about-section">
  <div class="title">
    <h2>About</h2>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>