Как добавить вертикальную линию к тексту?
Цветная линия возле текста привлекает к нему внимание, а цвет линии и фона может информировать о разном статусе текста — цитата, сообщение, предупреждение, важная информация и др.
Для вывода линии слева от текста применяется свойство border-left, оно создаёт линию заданной толщины, стиля и цвета. При этом высота линии привязывается к высоте текста и меняется вместе с ним. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.
В примере 1 используется класс callout, с помощью которого добавляется необходимый стиль. Цвет линии определяется через вспомогательные классы info, warning и alert.
Пример 1. Использование border-left
Результат данного примера показан на рис. 1.
Рис. 1. Линия с текстом