Один із найпопулярніших способів виділити текст на веб-сторінці – це використання підкреслення. Однак, замість традиційного верхнього підкреслення, який застосовується за умовчанням для посилань, ви можете додати нижнє підкреслення, щоб зробити текст більш помітним і легко читаним. У цій статті ми розглянемо, як застосувати нижнє підкреслення тексту за допомогою CSS.
Для початку, ви можете використовувати властивість text-decoration CSS для застосування підкреслення до тексту. Щоб додати нижнє підкреслення, можна встановити значення цієї властивості рівним "underline". Наприклад, якщо ви хочете виділити заголовок вашого блоку тексту підкресленою лінією, ви можете використовувати наступний код:
text-decoration: underline;
Однак, за умовчанням, ця властивість буде застосовувати підкреслення до всіх елементів з цим стилем. Щоб обмежити застосування підкреслення лише до певного тексту або елемента, можна використовувати класи або ідентифікатори. Наприклад, якщо у вас є елемент <p> з класом "highlight", і ви хочете застосувати нижнє підкреслення тільки до цього елемента, ви можете використовувати наступний код:
.highlight {
text-decoration: underline;
}
Тепер лише елементи з класом "highlight" матимуть нижнє підкреслення. За допомогою CSS можна точно керувати тим, який текст буде підкреслено, і створити цікавий та акцентований дизайн для своїх веб-сторінок.
| Назва CSS властивості | Опис |
|---|---|
| text-decoration | Визначає стиль підкреслення тексту |
| text-underline-position | Визначає положення підкреслення тексту |
| text-decoration-color | Визначає колір підкреслення тексту |
| text-decoration-line | Визначає лінію підкреслення тексту |
| text-decoration-style | Визначає стиль лінії підкреслення тексту |
| text-underline-offset | Визначає відстань між текстом та лінією підкреслення |
Як зробити нижнє підкреслення CSS?
Пишемо властивість text-decoration і після двокрапки вказуємо одне з доступних значень: underline – підкреслений текст. line-through – перекреслений текст. overline – надкреслений текст, лінія знаходиться над словами.
Як зробити лінію під текстом у CSS?
Щоб створити лінію під текстом, слід додати до елементу стильову властивість border-bottom, його значенням виступає одночасно товщина лінії, її стиль та колір (Приклад 1). Відстань від лінії до тексту можна регулювати властивістю padding-bottom, додаючи його до селектора H1. Результат цього прикладу показано на рис.
Як зрушити підкреслення CSS?
text-underline-offset Властивість встановлює зміщення підкреслення з його вихідного становища й у зв'язки із властивістю text-decoration . У властивості text-underline-offset хороша браузерна підтримка, вона працює у більшості сучасних браузерів, крім Firefox під Android.