Подчеркивание css: Подчеркивание в CSS (красивые эффекты с примерами кода)

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

В результате получится:

Fancy Underline

Свойство text-decoration-color

Это свойство наконец-то дает нам возможность изменить цвет оформления текста!

text-decoration-style

Свойство text-decoration-style используется для определения типа оформления текста, а новые инструкции содержат два значения: double и wavy:

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Wavy Decoration

Свойство text-decoration-line

Свойство text-decoration-line принимает значения underline, overline, line-through и blink (однако blink считается устаревшим):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Вы получите:

Strike This

Свойство text-decoration-skip

С помощью свойства text-decoration-skip мы можем сделать так, чтобы оформление текста не выходило за рамки элемента, к которому оно применяется. Возможные значения: objects, spaces, ink, edges и box-decoration.

Значение ink позволяет предотвратить перекрытие элементов оформления текста:

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Вы получите:

Hippopotamus

Значение objects пропускает оформление элементов, которые имеют отображение встроенного блока.

<p>
  Getting <span>Very</span> Fancy
</p>

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

В результате будет:

Getting Very Fancy

Остальные значения пока плохо поддерживаются браузерами, а именно:

• spaces: оформление не касается пробелов и знаков препинания.
• edges: создает зазор, если два элемента с текстовым оформлением находятся рядом друг с другом.
• box-decoration: оформление пропускает любое унаследованное поле, отступ или границу.

text-underline-position

Свойство text-underline-position – еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

При начальном значении auto браузеры обычно размещают оформление близко к базовой линии текста:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Что выглядит так:

Hippopotamus

… и теперь обратите внимание, как с значение under перемещает оформление текста под выносные элементы:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hippopotamus

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

Продолжайте изучать оформление текста в CSS самостоятельно и попробуйте создать какой-нибудь причудливый стиль.

Can I Use text-decoration? сообщает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Читайте также: Настройка полосы прокрутки с помощью CSS

Как сделать подчёркивание заголовка? | WebReference

Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.

Использование text-decoration

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h3>.

Пример 1. Использование text-decoration

Результат данного примера показан на рис. 1.

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

Использование border-bottom

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Рис. 2. Вид линии, созданной с помощью border-bottom

Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.

Пример 2. Использование border-bottom

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.

Использование ::after и content

Рис. 3. Линия, созданная через ::after

Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).

Пример 3. Использование ::after

Линии и рамки

См. также

• border-bottom
• text-decoration
• text-decoration-color
• Аккордеон меню
• Добавление тени
• Начертание
• Не только текст
• Оформление ссылок
• Подробнее о позиционировании
• Псевдоэлемент ::after
• Псевдоэлементы ::after и ::before
• Точки между слов

text-decoration-style — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-style задает стиль строк, указанный параметром text-decoration-line . Стиль применяется ко всем строкам, заданным с помощью text-decoration-line .

Если указанное украшение имеет определенное семантическое значение, например сквозная строка, означающая, что некоторый текст был удален, авторам рекомендуется обозначать это значение с помощью тега HTML, например или . Поскольку в некоторых случаях браузеры могут отключать стилизацию, смысловое значение в такой ситуации не исчезнет.

При одновременной настройке нескольких свойств line-decoration может оказаться более удобным вместо этого использовать сокращенное свойство

text-decoration .

 /* Значения ключевых слов */
стиль оформления текста: сплошной;
стиль оформления текста: двойной;
стиль оформления текста: пунктирный;
стиль оформления текста: пунктир;
стиль оформления текста: волнистый;
/* Глобальные значения */
стиль оформления текста: наследовать;
стиль оформления текста: начальный;
стиль оформления текста: вернуться;
стиль оформления текста: вернуть слой;
стиль оформления текста: не установлен;
 

Значения

сплошные

Рисует одну линию.

двойной

Рисует двойную линию.

с точкой

Рисует пунктирную линию.

пунктир

Рисует пунктирную линию.

волнистый

Рисует волнистую линию.

-moz-нет Нестандартный

Не рисует линию. Вместо этого используйте text-decoration-line : none .

Исходное значение	сплошной
Применяется ко всем элементам	. Это также относится к ::first-letter и ::first-line .
Унаследовано	нет
Расчетное значение	как указано
Тип анимации	дискретный

 text-decoration-style = 
 сплошной | 
 двойной | 
 пунктирная | 
 пунктир | 
 волнистый 

Установка волнистой линии подчеркивания

Красная волнистая линия создается следующим образом:

CSS

 . wavy {
  строка оформления текста: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
 

HTML

 
Под этим текстом красная волнистая линия.
 

Результаты

9 Таблицы в браузере разрешены только для загрузки BCD

9. Включите JavaScript для просмотра данных.

• При одновременной настройке нескольких свойств line-decoration может оказаться более удобным вместо этого использовать сокращенное свойство text-decoration .
• текстовая декоративная строка
• цвет оформления текста
• толщина оформления текста
• текст-подчеркивание-смещение

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Просмотрите исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последнее изменение этой страницы: 21 февраля 2023 г. участников MDN.

Свойство CSS text-decoration

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установка различных вариантов оформления текста для элементов

,

и

:

h2 {
  text-decoration: overline;
}

h3 {
  text-decoration: line-through;
}

h4 {
  text-decoration: underline;
}

h5 {
  украшение текста: подчеркивание надчеркнуть;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Свойство text-decoration определяет украшение, добавляемое к тексту, и является сокращением свойство для:

• text-decoration-line (обязательно)
• цвет оформления текста
• стиль оформления текста
• толщина оформления текста

Показать демо ❯

Спецификация
Модуль оформления текста CSS уровня 3 # text-decoration-style-property

Значение по умолчанию:	нет currentColor сплошной авто
Унаследовано:	нет
Анимация:	нет, см. отдельные свойства . Читать о анимированном
Версия:	CSS1, обновленный в CSS3
Синтаксис JavaScript:	объект .style.textDecoration=»подчеркивание» Попробуй

---

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Имущество
текстовое украшение	1,0	3,0	1,0	1,0	3,5

---

---

Синтаксис CSS

text-decoration: строка оформления текста цвет оформления текста text-decoration-style text-decoration-thickness |initial|inherit;

Значения свойств

Значение	Описание	Демо
строка оформления текста	Устанавливает тип оформления текста (например, подчеркивание, надчеркивание, проходной)	Демонстрация ❯
цвет оформления текста	Задает цвет оформления текста	Демонстрация ❯
стиль оформления текста	Устанавливает стиль оформления текста (например, сплошной, волнистый, пунктирный, пунктирный, двойной)	Демонстрация ❯
толщина оформления текста	Устанавливает толщину декоративной линии
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

---

Другие примеры

Пример

Добавить больше оформления текста:

h2 {
  text-decoration: подчеркивание, надчеркивание, пунктирная красная точка;
}

h3 {
  украшение текста: подчеркивание волнистое синий 5px;
}

Попробуйте сами »

---

Связанные страницы

Учебное пособие по CSS: Оформление текста CSS

Ссылка на HTML DOM: свойство textDecoration

❮ Предыдущая Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top2 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.