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

Question

I try to put a line before the first line of my text like this:

I tried with a :before, but it doesn't work :

 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

Make the p a flex container and you can easily adjust the line using margin:

 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>

Or use 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>

Or rely on some padding and background to create the line and no need extra markup, pseudo-element and a lot of 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

You can use display: flex on p element and then use margin on pseudo-element for space between line and text.

 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

you can change some css for :before and p tag, make p tag relative so that you can play with :before in absolute position.

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