Как сделать вертикальную линию в css

Question

Вячеслав Межуревский · Accepted Answer

Для формирования вертикальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них: Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border. ```html

``` ```css .create-line { width: 200px; border-top: 3px solid #32a1ce; } ``` Вариант №2. Используем готовый тег который формирует горизонтальную линию - hr. Только изменим его с помощью стилей: сделаем ширину 1px и выставим необходимую длину линии. ```css hr { width: 1px; height: 200px; } ``` Вариант №3. С помощью псевдоэлементов [:before и :after](https://developer.mozilla.org/ru/docs/Web/CSS/::before). Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after. ```html

Добавим линию слева и справа

``` Теперь рассмотрим стили. ```css .create-line-left { padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* блок будет занимать ширину по размеру контента в нём*/ display: inline-block; } .create-line-left:before{ content: " "; background: #33CCFF; width: 2px; height: 50px; /* линия смещена на 10px слева от текста*/ left: 10px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; } .create-line-left:after{ content: " "; background: #333333; width: 2px; height: 50px; /* линия смещена на 10px справа от текста*/ right: -10px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; } ```

Как сделать вертикальную линию в css

Ответы

Каталог