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

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

.create-line-left:after{ 
  content: " ";
  background: #333333;
  width: 50px;
  height: 1px;
  /* размещаем линию снизу и справа*/
  bottom: 15px;
  right: 20px;
  /* включаем абсолютное позиционирование относительно блока с relative */
  position: absolute;
}

В ответе Вячеслава Межуревского псевдоэлементы должны писаться с двумя двоеточиями "::"

.create-line-left::before{

Горизонтальную линию-разделитель делают тегом <hr> и оформляют через CSS:

<hr class="divider">

border: none убирает объёмную рамку, которую браузер рисует у <hr> по умолчанию. Цвет и толщину задаёт border-top.

Линия у блока

Если линия нужна между блоками, задайте блоку границу:

.section + .section {
  border-top: 1px solid #dcdcdc;
  padding-top: 32px;
}

Селектор .section + .section добавит линию перед каждой секцией, кроме первой.

Линия с текстом посередине

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

Псевдоэлементы ::before и ::after рисуют линии слева и справа, flex: 1 растягивает их на свободное место.

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

h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 8px;
  background: #0d6efd;
}

Варианты линии

hr или border

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

Псевдоэлементы и оформление блоков разбирают на курсе «Профессиональная верстка».