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

Как сделать вертикальную линию между словами?

Изучил основы html и css, начал практиковаться в вёрстке макетов. Сверстал один макет, начал второй, но появилась сложность с меню в шапке. Не знаю как сделать такую вертикальную линию между слов. Спасибо за помощь!

Отслеживать
задан 29 окт 2020 в 18:37
21 1 1 серебряный знак 2 2 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

да куча вариантов, как вы это можете сделать

вариант 1:

.text < display: inline-block; padding: 5px 10px; font-size: 20px; border-right: 1px solid #d0d0d0; >.text:last-child

 
текст 1
 
текст 2
 

вариант 2:

.text < display: inline; padding: 0px 10px; font-size: 20px; >.vr

текст 1
 
текст 2

Как добавить вертикальную линию к тексту?

Цветная линия возле текста привлекает к нему внимание, а цвет линии и фона может информировать о разном статусе текста — цитата, сообщение, предупреждение, важная информация и др.

Для вывода линии слева от текста применяется свойство border-left, оно создаёт линию заданной толщины, стиля и цвета. При этом высота линии привязывается к высоте текста и меняется вместе с ним. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.

В примере 1 используется класс callout , с помощью которого добавляется необходимый стиль. Цвет линии определяется через вспомогательные классы info , warning и alert .

Пример 1. Использование border-left

Результат данного примера показан на рис. 1.

Рис. 1. Линия с текстом

См. также

• border-left
• margin в CSS
• padding
• Блочные элементы
• Колесо для сокращённых свойств
• Отзывчивый веб-дизайн
• Открываем блочную модель
• Свойства текста в CSS
• Строчные элементы

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

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

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

 class="create-line">

.create-line  height: 200px; border-left: 3px solid #32a1ce; > 

 class="create-line-left"> Добавим линию снизу 

.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; > 

 class="create-line">