html - 如何在 CSS 中的文本前画一条线？

Question

我在网页上有一段文字关于我们，我想在其中 draw a blue line在它之前。这是 fiddle对于网页。我想知道如何使用选择器在 CSS 中实现这一点？或 CSS 中的任何其他方式来实现这一目标？

我正在使用的关于我们部分的 HTML 代码是:

<div class="about-homesail">
  <p class="headline-text">About Us</p>
  <p class="company-info">aha hahahah ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq...</p>
</div>

Answer 1

您可以使用 :before 创建一个伪元素来容纳边框，这不会影响文本。像这样:

.about-homesail .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

https://jsfiddle.net/3fruwccb/