html - 无法获取 h1 :after to float left and center

Question

我有一个 :after 类，它在 h1 元素下创建一行。 h1 元素在 left 上 float ，我想做的是使 :after 行向左浮动，但也在 h1 下方居中。

我将它向左浮动并尝试在父 div 上做一个文本中心，但无济于事。有什么想法吗？

Codepen

.singleAfterLine {
  display: block;
  float: left;
  height: 2px;
  background-color: #55B4B0;
  /*Great way to give single line color; see under GET FOOD NOT FAST FOOD */
  content: " ";
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

<div class="container-fluid greyBck" style="margin-top: 100px;" id="about">
  <div class="" style="padding-top: 50px; padding-bottom: 50px;">
    <div class="row" style="width: 80%; margin-left: 10%;">
      <div class="col-12 col-md-5">
        Duis faucibus, magna eu sodales viverra, nunc erat ullamcorper nibh, at varius leo ipsum eleifend lorem. Nam eu consectetur odio. Curabitur dolor libero, congue luctus gravida vitae, laoreet nec dolor. Donec sagittis lobortis odio, id hendrerit nunc molestie
        sagittis. Nam nec purus sapien. Nunc est purus, mattis ac magna maximus, pulvinar sodales lacus. Praesent eget pulvinar justo, in sodales arcu. Integer vel sagittis libero, id condimentum enim. Quisque sollicitudin tempus nibh pellentesque condimentum.
        Curabitur in posuere sem. Nulla aliquam in turpis ut molestie. In eu quam est.
      </div>
      <div class="col-12 col-md-7 bioText" style="float: left;">
        <h1 style="padding-bottom: 20px;">About Myself</h1>
        <span class="singleAfterLine"></span>
      </div>
    </div>
  </div>
</div>

Answer 1

你需要更改一些 css 才能得到这个

.bioText h1 {
        padding-bottom: 20px;
        display: inline-block;
        position: relative;
    }
.bioText h1:after {
        display: block;
        float: left;
        height: 2px;
        background-color: #55B4B0;
        content: " ";
        width: 100px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        position: absolute;
        left: 0;
        top: 50px;
        right:0px;
    }

<div class="container-fluid greyBck" style="margin-top: 100px;" id="about">
  <div class="" style="padding-top: 50px; padding-bottom: 50px;">
    <div class="row" style="width: 80%; margin-left: 10%;">
      <div class="col-12 col-md-5">
        Duis faucibus, magna eu sodales viverra, nunc erat ullamcorper nibh, at varius leo ipsum eleifend lorem. Nam eu consectetur odio. Curabitur dolor libero, congue luctus gravida vitae, laoreet nec dolor. Donec sagittis lobortis odio, id hendrerit nunc molestie sagittis. Nam nec purus sapien. Nunc est purus, mattis ac magna maximus, pulvinar sodales lacus. Praesent eget pulvinar justo, in sodales arcu. Integer vel sagittis libero, id condimentum enim. Quisque sollicitudin tempus nibh pellentesque condimentum. Curabitur in posuere sem. Nulla aliquam in turpis ut molestie. In eu quam est.
      </div>
      <div class="col-12 col-md-7 bioText" style="float: left;">
        <h1>About Myself</h1>
      </div>
    </div>
  </div>
</div>