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

Чтобы добавить линию к тексту необходимо задать элементу класс. Такое оформление может пригодиться для цитат, сообщений, предупреждений или передачи какой-то важной информации. Цвет линии и фона можно менять по своему усмотрению. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.

Пример

Lorem Ipsum

HTML


<p class="line">Lorem Ipsum</p>
      

CSS


.line{
    border-left: 4px solid #f66d52; /* Ширина, цвет и вид линии */ 
    padding: 10px; /* Расстояние от линии до текста */
    background: #efcec8; /* Цвет фона */
    color: #fff; /* Цвет текста */
}