Как сделать боковые линии от текста в css?

@jensen 

Для создания боковых линий от текста в CSS можно воспользоваться псевдоэлементами ::before и ::after. Вот пример кода:

HTML:

1

<p class="text-with-lines">Текст с боковыми линиями</p>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

.text-with-lines {
  position: relative;
}

.text-with-lines::before,
.text-with-lines::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 50%;
  background-color: #000; /* Цвет линии */
}

.text-with-lines::before {
  top: 50%;
  left: 0;
}

.text-with-lines::after {
  top: 50%;
  right: 0;
}

В данном примере мы задаем позицию элемента с классом .text-with-lines как "relative", чтобы позиционировать псевдоэлементы относительно него.

Затем мы создаем два псевдоэлемента с помощью селекторов ::before и ::after, и устанавливаем им content: "", чтобы они появились на экране.

Мы задаем высоту линии height: 1px и ширину width: 50%, чтобы они занимали половину ширины элемента.

Затем мы позиционируем первый псевдоэлемент сверху посередине с помощью top: 50%; и left: 0;, а второй - сверху справа с помощью top: 50%; и right: 0;.

Теперь у нас есть боковые линии от текста. Вы можете настроить цвет, толщину и другие свойства линий, изменив соответствующие значения.