Кольорова лінія біля тексту привертає до нього увагу, а колір лінії та фону може інформувати про різний статус тексту — цитата, повідомлення, попередження, важлива інформація та ін.
Для виведення лінії зліва від тексту застосовується властивість 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.
