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 元素上使用 display: flex，然后在 pseudo-element 上使用边距作为行和文本之间的 space。

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 2

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

或者依靠一些填充和背景来创建线条并且不需要额外的标记，pseudo-element 和很多 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 3

你可以为 :before 和 p 标签改变一些 css，使 p 标签相对，这样你就可以在绝对位置上玩 :before 。

p {
    padding-left: 40px;
    position: relative;
}
p:before {
    content: '';
    display: block;
    width: 35px;
    border-bottom: 4px solid #FBDBD3;
    position: absolute;
    left: 0;
    top: 6px;
}

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

CSS: how to add a line before a paragraph?

html

css

paragraph