Підкреслення для блокових елементів начебто тега <h1> можна проводити двояко. Наприклад, лінію під текстом встановлювати на всю ширину блоку, незалежно від обсягу тексту. А також підкреслення робити тільки тексту. Далі розглянемо обидва варіанти.
Лінія під текстом на всю ширину блоку
Щоб створити лінію під текстом, слід додати до елементу стильове властивість border-bottom, його значенням виступає одночасно товщина лінії, її стиль і колір (приклад 1).
Приклад 1. Лінія на всю ширину
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Лінія під заголовком</title>
<style>
h1 {
font-size: 200%; /* Розмір шрифту */
border-bottom: 2px solid maroon; /* Параметри лінії під текстом */
font-weight: normal; /* Прибираємо жирне накреслення */
padding-bottom: 5px; /* Відстань від тексту до лінії */
}
</style>
</head>
<body>
<h1>Приклад тексту</h1>
<p>Чорний заголовок привертає до себе увагу, незважаючи на те, що він чорний, а не білий.</p>
</body>
</html>
Відстань від лінії до тексту можна регулювати властивість padding-bottom, додаючи його до селектору h1. Результат цього прикладу показано на рис. 1.
Рис. 1. Лінія під заголовком
Підкреслення тексту
Щоб підкреслити тільки текст, необхідно скористатися властивістю text-decoration зі значенням underline, знову ж таки, додаючи його до селектору h1 (приклад 2).
Приклад 2. Лінія на ширину тексту
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Підкреслення заголовка</title>
<style>
h1 {
text-decoration: underline; /* Підкреслення заголовка */
}
</style>
</head>
<body>
<h1>Приклад тексту</h1>
<p>Чорний заголовок привертає до себе увагу, незважаючи на те, що він чорний, а не білий.</p>
</body>
</html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Підкреслення заголовка
У разі використання властивості text-decoration лінія жорстко прив'язана до тексту, тому визначити її положення і стиль не вдасться.