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

Для формирования вертикальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

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

<div class="create-line"></div>

Вариант №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;
}

Чаще всего вертикальную линию рисуют рамкой с одной стороны блока:

.sidebar {
  border-left: 2px solid #ccc;
  padding-left: 16px;
}

Линия получается высотой с блок и растёт вместе с контентом.

Отдельный элемент-линия

<div class="vline"></div>

<style>
  .vline {
    width: 1px;
    height: 100px;
    background: #333;
  }
</style>

Высоту задают явно: у пустого div высоты нет.

Разделитель между блоками во flex

<div class="row">
  <div>Слева</div>
  <div class="divider"></div>
  <div>Справа</div>
</div>

<style>
  .row {
    display: flex;
    gap: 16px;
  }

  .divider {
    width: 1px;
    background: #ccc;
  }
</style>

Во flex-контейнере элементы по умолчанию растягиваются по высоте строки. Высоту линии задавать не нужно.

Линии между пунктами меню

<nav class="menu">
  <a href="/">Главная</a>
  <a href="/blog">Блог</a>
  <a href="/contacts">Контакты</a>
</nav>

<style>
  .menu a + a {
    border-left: 1px solid #ccc;
    margin-left: 12px;
    padding-left: 12px;
  }
</style>

Селектор a + a выбирает ссылки, перед которыми стоит другая ссылка. У первой линии слева не будет.

Псевдоэлемент

Если в разметку нельзя добавить элемент, линию рисуют через ::before:

.item {
  position: relative;
  padding-left: 20px;
}

.item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #4a90e2;
}

Так же делают линию времени в списке событий.

Линия на всю высоту экрана

.vline {
  width: 1px;
  height: 100vh;
  background: #333;
}

Линия по центру блока

.box {
  background: linear-gradient(#ccc, #ccc) center / 1px 100% no-repeat;
}

Градиент из одного цвета шириной 1 пиксель встаёт по центру фона.

Почему hr не подходит

<hr> — горизонтальная линия, и она означает смену темы в тексте. Если повернуть её через transform: rotate(90deg), она сохранит прежнее место в разметке и размеры по горизонтали. Для вертикальной линии используйте один из способов выше.

Рамки, flexbox и псевдоэлементы разбирают в бесплатном курсе «Основы HTML и CSS».