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

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

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

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

Вариант №2. Используем готовый тег который формирует горизонтальную линию - hr.

Вариант №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: 150px;
  height: 1px;
  /* располагаем линию сверху от текста */
  top: 25px;
  /* включаем абсолютное позиционирование относительно блока с relative */
  position: absolute;
}

Горизонтальную линию в HTML рисует тег <hr>:

<p>Первый раздел</p>
<hr>
<p>Второй раздел</p>

Браузер нарисует серую линию на всю ширину. Внешний вид задают в CSS:

hr {
  border: none;
  border-top: 2px solid #0082ff;
  margin: 24px 0;
}

border: none убирает стандартную объёмную рамку, border-top рисует нужную линию.

<hr> означает смысловой разрыв: смену темы, раздел. Если линия нужна только для оформления, используйте border у существующего блока.

Линия у блока

.section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 16px;
}

Стили: solid — сплошная, dashed — пунктир, dotted — точки.

Вертикальная линия

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

.menu a + a {
  border-left: 1px solid #ccc;
  padding-left: 12px;
}

Отдельная вертикальная черта во flex-контейнере:

.divider {
  width: 1px;
  align-self: stretch;
  background: #ccc;
}

Линии по бокам от текста

<p class="or">или</p>

Короткая линия под заголовком

h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 8px;
  background: #0082ff;
}

Градиентная линия

hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0082ff, transparent);
}

Оформление блоков разбирают в бесплатном курсе «Введение в HTML и CSS».