Підкреслення буває різного виду, відповідно, розрізняються методи його створення. Нижче наведено кілька популярних.
Використання text-decoration
Властивість text-decoration зі значенням underline додає підкреслення до тексту; такого роду підкреслення можна спостерігати за посиланнями за умовчанням. Створена таким чином лінія дорівнює ширині тексту і буде такого кольору, що і сам заголовок. Можна змінити колір лінії за допомогою text-decoration-color. У прикладі 1 показано застосування text-decoration до елемента <h2>.
Приклад 1. Використання text-decoration
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Підкреслення</title> <style> h2 {text-decoration: underline; /* Додаємо підкреслення */
text-decoration-color: red; /* Колір лінії */
}
</style>
</head>
<body> <section> <h2>Культурний мовний акт у XXI столітті</h2> <p>Дійсно, текст, що міфо породжує, ілюструє дискурс, і це надає йому своє звучання, свій характер.</p>
</section>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Вигляд лінії, створеної через text-decoration
Браузери IE та Edge не підтримують властивість text-decoration-color.
>Використання border-bottom
Властивість border-bottom додає до елемента знизу лінію заданої товщини, кольору та стилю. Така лінія займає всю доступну ширину, незважаючи на довжину тексту заголовка (мал. 2).
Мал. 2. Вид лінії, створеної за допомогою border-bottom
Відстань від лінії до тексту можна регулювати за допомогою властивості padding-bottom, як показано в прикладі 2.
Приклад 2. Використання border-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Підкреслення</title> <style> h2 { border-bottom: 2px solid red; /* Додаємо підкреслення */
padding-bottom: 5px; /* Відстань від тексту до лінії */
}
</style>
</head>
<body> <section> <h2>Культурний мовний акт у XXI столітті</h2> <p>Дійсно, текст, що міфо породжує, ілюструє дискурс, і це надає йому своє звучання, свій характер.</p>
</section>
</body>
</html>Щоб лінія була на ширину тексту, достатньо заголовок перетворити на рядково-блоковий елемент, додавши до селектора h2 властивість display зі значенням inline-block.
Використання ::after і content
Також можна зробити штучну лінію через комбінацію властивості content та псевдоелемента ::after. Вони лише виводитимуть порожній псевдоелемент після заголовка, а вид цього псевдоелемента визначається іншими властивостями. На рис. 3 показана подібна лінія.
Мал. 3. Лінія, створена через ::after
Положення такої лінії щодо тексту визначається через властивість bottom з негативним значенням, колір лінії через властивість background. Насправді це виходить не лінія, а прямокутний блок, тому використовуємо фонову заливку (приклад 3).
Приклад 3. Використання ::after
< ;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Підкреслення</title> <style> h2 {position: relative; /* Відносне позиціонування */
display: inline-block; /* Лінія на ширину тексту */
}
h2::after { content: '; /* Виводимо порожній вміст */
position: absolute; /* Абсолютне позиціонування */
background: red; /* Колір лінії */
left: 0; /* Положення лінії зліва */
bottom:-5px; /* Положення лінії */
width: 100%; /* Лінія на ширину тексту */
height: 2px; /* Висота лінії */
}
</style>
</head>
<body> <section> <h2>Культурний мовний акт у XXI столітті</h2> <p>Дійсно, текст, що міфо породжує, ілюструє дискурс, і це надає йому своє звучання, свій характер.</p>
</section>
</body>
</html>