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

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

Для вывода линии слева от текста применяется свойство 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.

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