时间戳

首页 > 解决方案 > 移动下划线

在标题下方并位于左侧

html - 移动下划线
在标题下方并位于左侧

问题描述

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

我的问题

.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-->

标签： htmlcss

解决方案

实际上你不需要一个无用的额外 empty <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>

推荐阅读