html - CSS:如何在段落前添加一行？

Question

我试着在我的文本的第一行之前放一行，如下所示:

我尝试使用 :before，但它不起作用:

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 设为 flex 容器，您可以使用边距轻松调整行:

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>