Как сделать вертикальную линию в 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;
}
0 0
Основы Frontend за 14 дней
  • 72 урока в онлайн-тренажере
  • 4 живых вебинара и масскодинг
  • Помощь наставника на весь период обучения

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию на Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки