css 标题之间和之后的Hr行

ma8fv8wu 于 2022-12-20 发布在其他

关注(0)|答案(3)|浏览(163)

我想在title之前有一行hr，在title之后有一行hr。我使用Bootstrap 5，我设法在title之前和之后都有一行，但我使用堆栈，使用container类使title标记对齐，并使该行从屏幕的一侧到另一侧。
问题是我如何使用container来对齐内容，使行变成全角。

.decorated{
    overflow: hidden;
  text-align: center;
}
.decorated > span{
   position: relative;
   display: inline-block;
}
.decorated > span:before, .decorated > span:after{
   content: '';
   position: absolute;
   top: 50%;
   border-bottom: 2px solid;
   width: 591px; /* half of limiter*/
   margin: 0 20px;
}
.decorated > span:before{
   right: 100%;
}
.decorated > span:after{
   left: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="decorated"><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

这是我应该得到的：

css

来源：https://stackoverflow.com/questions/74850462/hr-line-between-and-after-title

3条答案

按热度按时间

pnwntuvh1#

你的代码看起来好像差不多了，只是因为某些原因你限制了两行的宽度，这段代码使它们每一行都是100vw，所以它们绝对肯定足够长。
它还删除了正文的边距和父文本的溢出（否则你不会让东西移到屏幕的边缘），并使用CSS calc将两行从实际文本的边缘替换20px（而不是你在它们上面设置的边距，因为这会在两端创建边距）。

* {
  margin: 0;
}

.decorated {
  text-align: center;
}

.decorated>span {
  position: relative;
  display: inline-block;
}

.decorated>span:before,
.decorated>span:after {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 2px solid;
  width: 100vw;
  /* margin: 0 20px; */
}

.decorated>span:before {
  right: calc(100% + 20px);
}

.decorated>span:after {
  left: calc(100% + 20px);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="col-md">
    <div class="">
      <div class="container">
        <h1 class="decorated"><span>My Title</span></h1>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-20

cdmah0mi2#

您可以使用一个小技巧，将line作为一个充满父对象的::before或::after，然后将span放在上面，并为span提供与父对象背景类似的背景色。

.decorated{
    overflow: hidden;
    position: relative;
}
.decorated > span{
    display: inline-block;
    background: white;
    padding: 0 10px;
    position: relative;
    left: 20%;  /* play with this one as you like */
}
.decorated::before{
    content: '';
    position: absolute;
    top: 50%; left: 0px;
    border-bottom: 2px solid;
    width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="decorated"><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

只需使用span的左值，您就完成了。

赞(0）回复(0）举报 2022-12-20

4nkexdtk3#

加上.container {margin: 0;}，这就是你想要的结果吗？

赞(0）回复(0）举报 2022-12-20