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

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Линия слева от текста</title> <style> .callout { border-left: 4px solid gray; /* Параметры линии */ padding: 10px; /* Расстояние от линии до текста */ background: #f0f0f0; /* Цвет фона */ } .info { border-color: green; background: #dff0d8; } .alert { border-color: red; background: #f2dede; } .warning { border-color: orange; background: #fcf8e3; } </style> </head> <body> <p class="callout">Просто текст с линией</p> <p class="callout info">Всё в порядке, просто сообщаем об этом</p> <p class="callout warning">Кажется, что-то пошло не так</p> <p class="callout alert">Ой-ой, всё плохо!</p> </body> </html>

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

Линия с текстом