text-decoration — подчёркнутый и зачёркнутый текст

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

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline:


/*делаем подчёркнутый текст*/
span {text-decoration: underline;}

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

none:


/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:


/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

/*задаём подчёркивание ссылок при наведении*/
a:hover {text-decoration: underline;}

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством

text-decoration, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object. style.textDecoration=»overline»

Синтаксис

text-decoration: none|underline|overline|line-through|inherit;

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

Значение Описание
none Оставляет текст без изменений.
underline
Определяет горизонтальную линию под текстом.
overline Определяет горизонтальную линию над текстом.
line-through Определяет линию перечеркивающую текст.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

text-decoration:

none

underline

overline

line-through

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

div {
text-decoration: none;
}

Перечёркнутый текст в HTML и CSS

21. 08.2019

42411

В закладки

Первыми тегами для зачёркнутого текста были <strike> и <s>.

<strike>Перечёркнутый текст</strike>
<s>Перечёркнутый текст</s>

HTML

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>, он помечает текст как удаленный, что семантически правильнее.

<del>Перечёркнутый текст</del>

HTML

По виду они не отличается:

Первый способ

С помощью CSS свойства text-decoration-color, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

<del>Перечёркнутый текст</del>

HTML

del {
	text-decoration: line-through;
	text-decoration-color: red;
}

CSS

Также можно изменить стиль линии с помощью text-decoration-style.

Значение Описание Пример
text-decoration-style: solid;
Одинарная линия		 Текст
text-decoration-style: double; Двойная линия Текст
text-decoration-style: dotted; Точечная линия Текст
text-decoration-style: dashed; Пунктирная линия Текст
text-decoration-style: wavy; Волнистая линия Текст

Второй способ

Тегу <del> задается цвет линии, вложенному <span>

цвет текста.

<del>
	<span>Текст зачёркнут красной линией</span>
</del>

HTML

del {
	color: red;
	text-decoration: line-through;
}
del span {
	color: blue;
}

CSS

Третий способ

Линия добавляется псевдо элементом :before, но у текста не должно быть переносов.

<del>Перечёркнутый текст</del>

HTML

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
}

CSS

При такой реализации, можно расположить линию за текстом.

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
	z-index: -1;
}

CSS

21.08.2019, обновлено 30.08.2019

42411

#CSS #HTML #Тексты и символы

В закладки

Другие публикации

Список MIME типов

Ниже приведён список MIME-заголовков и расширений файлов.

Генерация QR-кода в PHP

Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой…

Фон под текстом

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.

Текст с градиентом

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

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

Свойство CSS text-underline-position указывает положение подчеркивания, которое устанавливается с использованием значения подчеркивания свойства text-decoration .

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

Значения

авто

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

от шрифта

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

auto , при этом браузер выбирает соответствующую позицию.

ниже

Принудительно устанавливает линию ниже базовой линии алфавита, в положении, в котором она не будет пересекать выносные элементы. Это полезно для обеспечения удобочитаемости химических и математических формул, в которых широко используются нижние индексы.

слева

В режимах вертикального письма это ключевое слово принудительно размещает строку с левой стороны текста. В режимах горизонтального письма это синоним 9.0004 под .

справа

В режимах вертикального письма это ключевое слово принудительно размещает строку с правой стороны текста. В режимах горизонтального письма это синоним под .

автопост Нестандартный Экспериментальный

Синоним auto , который следует использовать вместо него.

выше Нестандартный

Устанавливает строку над текстом. При использовании восточноазиатского текста использование ключевого слова auto приведет к аналогичному эффекту.

ниже Нестандартный

Устанавливает строку под текстом. При использовании с буквенным текстом использование ключевого слова auto приведет к аналогичному эффекту.

5
Начальное значение auto
Применяется к всем элементам
Унаследовано
8 да Расчетное значение как указано
Тип анимации Дискретный
 подчеркивание текста = 
 авто | 
 [ под || [ слева | right ] ]

Простой пример

Возьмем пару простых абзацев для примера:

 <р>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  турпис вель лаореет. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan Tellus Ac Erat Pouere.




  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  турпис вель лаореет. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis.  Nam eget sodales quam. Aliquam accumsan Tellus Ac Erat Pouere.

Наш CSS выглядит так:

 p {
  размер шрифта: 1.5rem;
  преобразование текста: использовать заглавные буквы;
  оформление текста: подчеркивание;
  толщина оформления текста: 2px;
}
.горизонтальный {
  позиция подчеркивания текста: под;
}
.вертикаль {
  режим письма: вертикальный-rl;
  позиция подчеркивания текста: слева;
}

В этом примере мы установили для обоих абзацев толстое подчеркивание. В горизонтальном тексте мы используем text-underline-position: under; , чтобы поставить подчеркивание под всеми подстрочными элементами.

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

Живой пример выглядит следующим образом:

Глобальная установка text-underline-position

Поскольку свойство text-underline-position наследуется и не сбрасывается сокращенным свойством text-decoration , может быть целесообразно установить его значение на глобальном уровне. Например, под значением может подойти для документа с большим количеством химических и математических формул, которые широко используют индексы.

: корень {
  позиция подчеркивания текста: под;
}
Таблицы в браузере с включенной загрузкой только в BCD

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

  • Свойство text-decoration является сокращением для настройки большинства свойств text-decoration, включая text-decoration-line , text-decoration-color и text-decoration-style . Однако он не устанавливает text-underline-position .

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

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

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

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

Последний раз эта страница была изменена участниками MDN.

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

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


Пример

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

дива {
  text-decoration-line: overline;
}

дел.б {
  text-decoration-line: подчеркивание;
}

раздел.с {
строка оформления текста: сквозная;
}

раздел д {
  text-decoration-line: надчеркивание, подчеркивание;
}

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

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

Свойство text-decoration-line задает используемый вид оформления текста (например, подчеркивание, надчеркивание, зачеркивание).

Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.

Примечание: Вы также можете комбинировать более одного значения, например, подчеркивание и надчеркивание, чтобы отображать линии как под текстом, так и над ним.

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

Спецификация
Модуль оформления текста CSS, уровень 3
# text-underline-position-property
Значение по умолчанию: нет
По наследству: нет
Анимация: №. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationLine="overline" Попробуй

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

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

Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.

Недвижимость
строка оформления текста 57,0 79,0 36,0
6,0 -моз-		 12.1
7.1 -вебкит-		 44,0

Синтаксис CSS

text-decoration-line: нет|подчеркивание|надчеркивание|сквозь строку|начальный|наследовать;

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

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

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

Учебник CSS: Декорирование текста CSS

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

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


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Как учебное пособие
Учебник SQL
Учебник по Python
W3.CSS Lutorial
Dutorial
STAMERIORIENT
STAMERIORIEL
DUTIORION
DUTIORION
DUTIORIOL
DUTIORIOL
DUTIORIOL
DUTIORIOL
STAMERIORIENT
DUTIORIOL
STAMERIORIENT
DUTIORIOL
. Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

No related posts.