Изменение толщины подчеркивания в CSS: text-decoration

Быстрый ответ

Если хотите изменить толщину подчеркивания в CSS, то вам поможет свойство border-bottom или задание фонового градиента с помощью background-image. Вот пример использования border-bottom:

.thick-underline {
    text-decoration: none; /* Отключаем стандартное подчеркивание */
    border-bottom: 3px solid; /* Устанавливаем желаемую толщину */
}

Так это выглядит в HTML-элементе:

<span class="thick-underline">Текст с более толстым подчеркиванием.</span>

Объясняем свойства text-decoration

CSS-свойство text-decoration очень важно для оформления текста. Оно позволяет изменять цвет, тип линии и стиль подчеркивания в соответствии с дизайнерскими требованиями.

Рассмотрим альтернативы: тени и псевдоэлементы

Создание с помощью box-shadow

Свойство box-shadow в CSS дает возможность настроить теневое подчеркивание с высокой степенью точности:

.shadow-underline {
    text-decoration: none; /* Избавляемся от стандартных подчеркиваний */
    box-shadow: 0px 1px 0px #000; /* Добавляем теневые подчеркивания */
}

Подробнее об этом расскажет наш спикер на видео

Применение псевдоэлементов

Псевдоэлемент :after с абсолютным позиционированием использовался для реализации более сложных стилей подчеркивания:

.custom-underline:after {
    content: '';
    position: absolute; /* Полный контроль над позиционированием */
    left: 0;
    bottom: -5px; /* Исключаем пересечение с нижележащими элементами */
    height: 3px; /* Регулируем толщину */
    width: 100%;
    background: currentColor;
}

Применение инлайн-стилей

Вы можете внести изменения в подчеркивание текста непосредственно в HTML, используя инлайн-стили для элемента span:

<span style="text-decoration: underline; text-decoration-thickness: 2px;">Очевидно выделенный текст</span>

Сделайте ваш текст интерактивным и удобочитаемым

Интерактивное подчеркивание

Сделайте взаимодействие с пользователем ещё более привлекательным с помощью динамически изменяющегося подчеркивания при наведении:

.interactive-underline:hover {
    border-bottom: 3px solid transparent;
    text-decoration: underline;
    text-decoration-color: red; /* Впечатляющий и запоминающийся */
    text-decoration-thickness: 3px; /* Толщина, обеспечивающая четкость выделения */
}

Акцент на доступности

При формировании подчеркивания убедитесь, что оно ясно видно, не затрудняет чтение текста и не пересекается с диакритическими знаками. Контрастность цветов должна соответствовать стандартам WCAG.

Секрет мастерства: живые примеры и динамические решения

Экспериментируйте с Codepen и jsfiddle

Осваивайте тонкости стильного оформления текста, используя платформы Codepen и jsfiddle. Они позволят вам в режиме реального времени следить за изменениями и испытывать новые идеи.

Используйте JavaScript для динамического подчеркивания

С помощью JavaScript удобно вносить динамические изменения в подчеркивания, которые могут зависеть от разных параметров, таких как тип шрифта, толщина символов или языковые настройки.

Полезные материалы

1. text-decoration – CSS: Cascading Style Sheets | MDN — подробное объяснение свойства text-decoration в CSS.
2. CSS text-decoration-thickness property — больше информации о регулировании толщины подчеркивания текста.
3. text-underline-offset | CSS-Tricks – CSS-Tricks — примеры применения и использования смещения подчеркивания текста.
4. CSS Text Decoration Module Level 3 — официальная спецификация W3C по свойству text-decoration.
5. "text-decoration-thickness" | Can I use... Support tables for HTML5, CSS3, etc — информация о поддержке свойства text-decoration-thickness в различных браузерах.
6. Advanced Text Underline Effects with CSS and JavaScript — освоение более продвинутых и креативных способов подчеркивания текста.