Я пытаюсь поставить строку перед первой строкой моего текста следующим образом:

enter image description here

Я пытался с: раньше, но это не работает:

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>
1
L Coisser 24 Фев 2018 в 14:48

3 ответа

Лучший ответ

Вы можете изменить некоторые css для тега: before и p, сделать тег 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;
}
0
Zuber 24 Фев 2018 в 12:00

Сделайте 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>
1
Temani Afif 24 Фев 2018 в 12:07

Вы можете использовать display: flex для элемента p, а затем использовать поле для псевдоэлемента для пробела между строкой и текстом.

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>
0
Nenad Vracar 24 Фев 2018 в 11:54