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 us之前插入一行并设置color：blue;

https://www.w3schools.com/cssref/sel_before.asp

Answer 2

使用::before选择器。它创建一个伪元素，它是所选元素的第一个子元素。它通常用于向具有content属性的元素添加化妆品内容。

您可以使用以下代码：

   .headline-text::before {
         content: "";
         position: absolute;
         width: 100%;
         border-bottom: 1px solid blue;
      }

Learn more

Answer 3

以下是所有方法：https://jsfiddle.net/sheriffderek/feqfj54o/

<hr />

<h2 class='special-heading'>I'm a level 2 heading</h2>

<section class='section-name'>
  <h2>Some text...</h2>

  <p>Some stuff in a section</p>
</section>


<section class='with-before-element'>
  <h2>Section using a 'before' or 'after' psuedo element</h2>
</section>

...

hr {
  border: 0;
  height: 1px;
  background: red;
}


.special-heading {
  border-top: 1px solid blue;
}

.section-name {
  border-top: 1px solid green;
}


.with-before-element {
  position: relative;
  padding-top: 5px;
}

.with-before-element:before {
  display: block;
  content: '';
  /* these 'psuedo' elements need a content declaration even if you don't have any.... */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: orange;
}

Answer 4

您可以使用: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/

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

4 个答案: