标题后面显示CSS边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (120)

我想要一个像图中所示的标题

.

目前我有3个flex列:

<section id="section1" class="py-5">
    <div class="container">
        <div class="d-flex">
            <div class="p-2 w-50 text-center"><h1>OUR DIVISIONS</h1></div>
            <div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
            <div class="p-2 w-25 text-center">Sample Heading 3</div>
        </div>
    </div>
</section>

如图所示,我需要在标题中使用OUR____line效果。

提问于
用户回答回答于

我设法提出了一些接近你似乎正在寻找的东西,但在我看来,它高度依赖于容器的宽度(即h1,h2等)

也许你可以使用下面提供的代码并根据自己的需要进行调整?

请参阅下面的演示代码

.w-50 {
  background-color: #f8db7d;
  font-family: sans-serif;
  width: 160px;
}

.w-50>h1 {
  font-size: 18px;
  padding: 5px 10px;
  margin: 0;
  line-height: 1em;
}

.w-50>h2 {
  font-size: 28px;
  padding: 0 10px;
  margin: 0;
  width: 100px;
}

.w-50 > h1 > span {
  width: 100px;
  display:inline-block;
  border-bottom: 2px solid black;
  line-height: .8em;
}
<section id="section1" class="py-5">
  <div class="container">
    <div class="d-flex">
      <div class="p-2 w-50 text-center">        
        <h1>OUR<span/></h1>
        <h2>DIVISIONS</h2>
      </div>
      <div class="p-2 w-25 text-center">
        <h1>Sample Heading 2</h1>
      </div>
      <div class="p-2 w-25 text-center">Sample Heading 3</div>
    </div>
  </div>
</section>

扫码关注云+社区

领取腾讯云代金券