CODEWITHSUNDEEP
htmlcssparagraph
L Coisser
L Coisser

Reputation: 13

CSS: how to add a line before a paragraph?

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

enter image description here

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>

Upvotes: 1

Views: 2173

Answers (3)

Temani Afif
Temani Afif

Reputation: 272909

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>

Upvotes: 1

Zuber
Zuber

Reputation: 3473

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;
}

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 0

Related Questions