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

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

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

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

.create-line {
  width: 200px;
  border-top: 3px solid #32a1ce;
}

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