Как сделать вертикальную линию в css
Для формирования вертикальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:
Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.
<div class="create-line"></div>
.create-line {
width: 200px;
border-top: 3px solid #32a1ce;
}
Вариант №2. Используем готовый тег который формирует горизонтальную линию - hr. Только изменим его с помощью стилей: сделаем ширину 1px и выставим необходимую длину линии.
hr {
width: 1px;
height: 200px;
}
Вариант №3. С помощью псевдоэлементов :before и :after. Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.
<div class="create-line-left">
Добавим линию слева и справа
</div>
Теперь рассмотрим стили.
.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;
}