Дозволяє зробити різний підкреслення в HTML нижнє (underline), верхнє (overline), перекреслений текст (line-through) і т.п. Сумісний цю фішку з попередньої і вийде:

У другому рядку показано як все записується в один ряд з text-decoration.

text-decoration-style - стиль підкреслення тексту

Опція задає зовнішній вигляд декоративної лінії для / посилання. У нових рекомендаціях CSS були додані значення wavy і double, тепер їх всього 5:

• solid - суцільна лінія;
• double - подвійна (з першого прикладу вище);
• dotted - складається з послідовності точок;
• dashed - дозволяє зробити пунктирне підкреслення CSS;
• wavy - ефектна хвиляста лінія.

text-underline-position - позиціонування CSS підкреслення

З допомогу цього властивості можна керувати позицією лінії щодо гліфа шрифту.
Всього доступні 4 варіанти:

• auto - розташовується в максимальному наближенні базової лінії тексту;
• under - під самою нижньою межею шрифту;
• left і right - зліва / справа для записів, що відображаються вертикально.

Ось наочне відміну нижнього підкреслення тексту за допомогою under і auto:

Різниця, думаю, цілком очевидна.

text-decoration-skip - прибираємо підкреслення для елементів

За допомогою опції можна скасувати (пропустити) декорування деяких елементів в HTML рядку. Щоб краще зрозуміти допустимі значення spaces, objects, box-decoration, edges, ink продублюють картинку з минулого замітки:

Тобто, наприклад, за допомогою ink ви можете зробити нижнє підкреслення в CSS, яке б не зустрічалося з символами. Значення objects дозволяє пропускати інлайновие елементи (inline-block) - вставляєте span, і суцільна лінія перерветься у відповідному місці:

Параметри box-decoration, spaces, edges набагато гірше підтримуються браузерами, тому їх результат іноді відрізняється від очікуваного. Ось стан по сумісності / підтримки text-decoration на момент написання статті:

Додаткові фішки для підкреслення посилань

Початківці користувачі часто задають деякі типові питання по темі, тому ми також вирішили їх розглянути. Загальний приклад знаходиться в самому низу після пояснень.

Як прибрати підкреслення посилання

a: hover (text-decoration: underline;)

Обидва приклади нижче дозволяють зрозуміти логіку роботи при наведенні: або ви спочатку вказуєте в CSS підкреслення посилань, а потім забираєте його в hover, або навпаки.

Якщо будуть ще якісь питання по темі, задавайте їх у коментарях. Постараємося розглянути пізніше або підказати у відповідях. Головне в цій справі практика - спробуйте додати різні властивості для опції text-decoration безпосередньо в прикладах або створіть свій тестовий файл. Сподіваємося по темі підкреслення тексту і посилань в CSS / HTML все стало ясно.

Хоча для оформлення текстових посилань традиційно застосовується підкреслення, допустимо використання і інших способів зміни виду посилань. Ось деякі з них:

• посилання без підкреслення;
• декоративне підкреслення;
• виділення фоновим кольором;
• рамки;
• малюнок біля посилання.

Посилання без підкреслення

Підкреслення текстових посилань вже стало певним стандартом і сигналом про те, що це не просто текст, а саме посилання. Це, до речі, є однією з причин, по якій не слід застосовувати підкреслення до тексту, - користувачі будуть вважати, що мають справу з посиланням. Поряд з використанням підкреслення завдяки CSS у розробників сайтів з'явився і альтернативний варіант - створення посилань без підкреслення. При правильному застосуванні таке оформлення посилань навіть може надати сайту певний ефект. Тільки треба обов'язково дати зрозуміти користувачеві, що є посиланням, а що звичайним текстом, розмежовуючи їх, наприклад, кольором. Ще можна зробити так що при наведенні курсору посилання стає підкресленою, змінює свій колір або використовується і той, і інший ефект одночасно.

Приклад 1. Відсутність підкреслення у посилань

Для псевдокласів: hover і: visited немає необхідності додавати text-decoration, вони успадковують властивості селектора a.

Підкреслення посилань при наведенні на них курсора миші

Щоб додати підкреслення для посилань, у яких встановлено text-decoration: none, слід скористатися псевдоклас: hover. Він визначає стиль посилання, коли на неї наводиться курсор миші. Залишається тільки додати для псевдокласу властивість text-decoration зі значенням underline (приклад 2).

Приклад 2. Підкреслення посилань

Декоративне підкреслення посилань

Підкреслення у посилань можна задати не просто суцільною лінією, а, наприклад, пунктирною. Для цього треба скористатися властивістю border-bottom, яке створює лінію внизу елемента. Вказавши один з аргументів цієї властивості dashed, отримаємо пунктирне підкреслення. У прикладі 3 показано завдання синього пунктиру у посилань червоного кольору при наведенні на них курсора миші.

Приклад 3. Пунктирне підкреслення для посилань

При використанні наведеного способу пунктирна лінія з'являється трохи нижче звичайного підкреслення тексту. Тому до стилю посилання слід додати text-decoration зі значенням none, щоб одночасно не вийшло дві лінії (рис. 1).

Рис. 1. Використання пунктиру для виділення посилання

Не обов'язково використовувати пунктир, наприклад, для створення подвійний лінії слід вказати значення, як показано в прикладі 4.

Приклад 4. Подвійне підкреслення посилань

Змінюючи товщину лінії, її тип і колір, можна отримати безліч різноманітних ефектів.

Використання фонового кольору

Щоб додати до заслання кольоровий фон, досить скористатися властивістю background, присвоївши йому колір в будь-якому доступному форматі. Аналогічно можна використовувати псевдоклас: hover, тоді колір фону під посиланням буде змінюватися при наведенні на неї курсора миші (приклад 5).

Рис. 2. Зміна кольору фону при наведенні на посилання курсора

Рамка навколо посилання

У прикладі 6 показано, як змінювати колір рамки, використовуючи властивість border. Підкреслення тексту через text-decoration можна прибрати або залишити без зміни.

Приклад 6. Зміна кольору рамки у посилань

Щоб рамка «прилипала» до тексту, в прикладі навколо нього встановлені поля за допомогою padding. Можна також разом із застосуванням рамки додати і фон, скориставшись властивістю background.

Якщо потрібно додати рамку до посилань при наведенні на них курсора, то слід подбати про те, щоб текст в цьому випадку не зміщувався. Досягти цього найпростіше додаванням невидимою рамки навколо посилання і подальшої зміни кольору рамки за допомогою псевдокласу: hover. Прозорий колір вказується за допомогою ключового слова transparent, в іншому стиль не зміниться.

A (border: 1px solid transparent; / * Прозора рамка навколо посилань * /) a: hover (border: 1px solid red; / * Червона рамка при наведенні курсору на посилання * /)

Малюнки біля зовнішніх посилань

Зовнішньої називається таке посилання, яка вказує на інший сайт. Подібна посилання ніяк не відрізняється від локальних посилань усередині сайту, визначити, куди вона веде, можна тільки подивившись рядок стану браузера. Але в цей рядок заглядають не всі і не завжди. Щоб користувачі відрізняли зовнішні посилання від звичайних, їх слід виділяти будь-яким способом. Наприклад, поставити біля посилання маленький малюнок, який показує, що статус посилання інший (рис. 3).

Використання малюнків біля зовнішніх посилань добре тим, що оформлена таким чином посилання однозначно відрізняється від звичайних посилань усередині сайту, а правильно підібраний малюнок говорить відвідувачеві, що посилання веде на інший сайт. Щоб розділити стиль для локальних і зовнішніх посилань скористаємося селектором атрибуту. Оскільки всі посилання на інші сайти пишуться з зазначенням протоколу, наприклад http, то досить задати стиль для тих посилань, у яких значення атрибута href починається на http: //. Це робиться за допомогою конструкції a (...), як показано в прикладі 7.

Фонова картинка розташовується праворуч від посилання, а щоб текст не накладався поверх малюнка додано поле праворуч через властивість padding-right. Якщо буде потрібно додати малюнок зліва, то 100% замінюємо на 0, а padding-right на padding-left.

Протокол може бути не тільки http, але і ftp і https, для них цей рецепт перестає працювати. Так що для універсальності краще змінити селектор на a, він повідомляє що стиль треба застосовувати до всіх посилань, в адресі яких зустрічається //.

Розглянемо всі способи як можна зробити підкреслений текст через html і CSS. Всього існує три варіанти:

• Через html тег і
• Через властивість CSS text-decoration
• Через властивість CSS border-bottom

Підкреслений текст через html тег і