将带下划线的 <div> 移动到标题下方并定位到左侧

Question

我正在尝试将此 div 移动到标题下方的左侧，但我似乎无法使用 text-align 或 justify 内容来做到这一点，这些是我常用的居中方法。但是，我希望这个 div 向左移动。

my problem

.grid-container {
  max-width: 90vw;
}

.section-title {
  padding: 1rem 0.5rem;
}

.title_name {
  font-size: 3rem;
  text-transform: capitalize;
}

.title_underline {
  background: #F4D06F;
  width: 15rem;
  height: 0.25rem;
}

.title_text {
  letter-spacing: .1rem;
  line-height: 1.5;
  margin-top: 1rem;
  color: grey;
}

<article class="about-container">
  <div class="title">
    <h1 class="title_name">our story</h1>
    <div class="title_underline"></div>
    <p class="title_text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe illo quae ea nulla quas quia eaque omnis maxime tenetur molestiae eveniet at laboriosam provident, quibusdam quo sit expedita similique earum.</p>
  </div>
  <div class="about_image">
    <img src="img/bravo.jpg" class="about_img" alt="about-img">
  </div>
</article>
<!--about column 1-->

Answer 1

其实你不需要多余的空<div>，只需要一个:after伪：

.title_name {
  font-size: 3rem;
  text-transform: capitalize;
}

.title_name:after {
  content: "";
  display: block;
  margin-top: 1rem;
  background: #F4D06F;
  width: 15rem;
  height: 0.25rem;
}

<h1 class="title_name">our story</h1>
<p>Lorem Ipsum</p>

Answer 2

因为它是div，所以默认为display: block;，所以您需要将其设置为display: inline-block;。

.title_underline
{
    background: #F4D06F;
    width: 15rem;
    height: 0.25rem;
    display: inline-block;
}