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

Пользователь

от jensen , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от ally , 7 месяцев назад

@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;.


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