@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;
.
Теперь у нас есть боковые линии от текста. Вы можете настроить цвет, толщину и другие свойства линий, изменив соответствующие значения.