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>

CSS边界底问题

1 个答案: