CSS：如何在段落前添加一行？

Question

我尝试在我的文字的第一行之前加上一行：

我尝试过：之前，但它不起作用：

p:before {
  content: '';
  display: block;
  width:30px;
  top: 10px;
  bottom:30px;
  border-bottom: 4px solid #FBDBD3;
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent purus massa, dapibus eget ipsum ac, tincidunt feugiat justo. Duis ac dui bibendum, laoreet nunc eget, laoreet enim. Aenean ac congue ex. Sed id egestas diam, molestie interdum tellus.</p>

Answer 1

使p成为弹性容器，您可以使用边距轻松调整线条：

p {
 display:flex;
 align-items:flex-start;
}

p:before {
  content: '';
  width:50px;
  margin-top: 10px;
  margin-right:10px;
  border-bottom: 4px solid #FBDBD3;
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent purus massa, dapibus eget ipsum ac, tincidunt feugiat justo. Duis ac dui bibendum, laoreet nunc eget, laoreet enim. Aenean ac congue ex. Sed id egestas diam, molestie interdum tellus.</p>

或使用display:table：

p {
 display:table;
 border-spacing:10px;
}

p:before {
  content: '';
  width:50px;
  position:relative;
  top:10px;
  display:table-cell;
  border-top: 4px solid #FBDBD3;
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent purus massa, dapibus eget ipsum ac, tincidunt feugiat justo. Duis ac dui bibendum, laoreet nunc eget, laoreet enim. Aenean ac congue ex. Sed id egestas diam, molestie interdum tellus.</p>

或依靠一些填充和背景来创建行，不需要额外的标记，伪元素和大量的CSS：

p {
 padding:0 0 0 100px;
 background:linear-gradient(to right,#FBDBD3,#FBDBD3) 0 5px/80px 4px no-repeat;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent purus massa, dapibus eget ipsum ac, tincidunt feugiat justo. Duis ac dui bibendum, laoreet nunc eget, laoreet enim. Aenean ac congue ex. Sed id egestas diam, molestie interdum tellus.</p>

Answer 2

您可以在display: flex元素上使用p，然后在伪元素上使用margin作为行和文本之间的空格。

p {
  display: flex;
  align-items: flex-start;
}
p:before {
  content: '';
  width:30px;
  border-bottom: 4px solid #FBDBD3;
  margin-right: 15px;
  margin-top: 7px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent purus massa, dapibus eget ipsum ac, tincidunt feugiat justo. Duis ac dui bibendum, laoreet nunc eget, laoreet enim. Aenean ac congue ex. Sed id egestas diam, molestie interdum tellus.</p>

Answer 3

你可以改变一些css：before和p tag， 使p标签相对，以便您可以使用：在绝对位置之前。

$results = ModelA::with('model_b')->where('model_b.field_from_model_b',true)->get()