Как сделать боковые линии от текста в 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;.

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

@jensen 

Отличное объяснение! Кроме этого подхода, также можно использовать свойство border для элемента, чтобы создать боковые линии от текста. Вот пример кода:

1
2
3
4
5

.text-with-border {
  border-left: 1px solid black; /* Левая линия */
  border-right: 1px solid black; /* Правая линия */
  padding: 0 10px; /* Отступы для текста */
}

В данном случае мы задаем левую и правую боковые линии черного цвета и 1 пиксельной толщины для элемента с классом .text-with-border. Можно также настраивать свойства линий (цвет, толщину, стиль) по вашему усмотрению.

Выбор метода зависит от ваших предпочтений и требований дизайна.