Как зачеркнуть текст в css
Перейти к содержимому

Как зачеркнуть текст в css

  • автор:

Подчеркивание, зачеркивание текста в CSS: свойство text-decoration

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

Значение Что делает
underline Нижнее подчеркивание текста
overline Верхнее подчеркивание текста
line-through Зачеркивание текста
blink Мигание текста
none Удаление всех эффектов
inherit Наследование значений родителя

Пример записи стиля:

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

Если вы желаете убрать стандартное подчеркивание гиперссылки в браузере, воспользуйтесь значением none .

Значение blink (мигание текста) хоть и внесено в таблицу, на данный момент не поддерживается браузерами.

Скриншот с примерами использования стиля:

Скриншот: пример использования свойства text-decoration

Далее в учебнике: установка тени для текста при помощи свойства CSS text-shadow.

text-decoration

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст ( пример ). overline Линия проходит над текстом ( пример ). underline Устанавливает подчеркнутый текст ( пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    text-decoration   

Стратегическое нападение

Объектная модель

[window.]document.getElementById(» elementID «).style.textDecoration

[window.]document.getElementById(» elementID «).style.textDecorationBlink

[window.]document.getElementById(» elementID «).style.textDecorationLineThrough

[window.]document.getElementById(» elementID «).style.textDecorationNone

[window.]document.getElementById(» elementID «).style.textDecorationOverLine

[window.]document.getElementById( «elementID «).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Зачеркнутый текст HTML

Для зачеркивания текста в HTML применяется тег strike:

Результат выполнения данного кода:

  1. Электроник
  2. Сыроежкин
  3. Смирнов
  4. Чижиков
  5. Кукушкина

Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия — s (аналогично, жирный — b, курсив — i, подчеркнутый — u):

Конструктор LEGO "Нубекс"

Как вы можете видеть, результат аналогичен:

Конструктор LEGO «Нубекс»

Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной Doctype). Или другой вариант — использовать CSS.

Перечеркнутый текст: CSS

С помощью CSS текст можно «декарировать» при помощи свойства text-decoration. Это свойство может принимать следующие значения:

  • line-through — используется для перечеркивания текста;
  • underline — подчеркивает текст;
  • overline — используется для помещения линии над текстом (надчеркнутый текст);
  • blink — тест мигает (каждую секунду);
  • none — позволяет отменить все эффекты, примененные к тексту.

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

text-decoration: underline blink overline;

Сделаем теперь перечеркнутый текст при помощи CSS:

   Зачеркнутый текст CSS - "Нубекс"  p < color:#fff; >.strike < text-decoration: line-through; color: #fff; >.block  

Конструктор LEGO сайтов "Нубекс"

text — decoration

Добавляем любому тексту чёрточку. Или убираем, где она есть, но не нужна.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Егор Левченко ,
  • Светлана Коробцева

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

text — decoration : underline часто встречается при работе со ссылками.

Пример

Скопировать ссылку «Пример» Скопировано

Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text — decoration .

   

Диакритические знаки.

В типографике.

Диакритическими знаками не могут.

Черта сверху — типографический знак.

div class="parent"> p class="none">Диакритические знаки. p> p class="underline">В типографике. p> p class="line-through">Диакритическими знаками не могут. p> p class="overline">Черта сверху — типографический знак. p> div>
 .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none;> .underline  /* Нижнее подчёркивание */ text-decoration: underline;> .line-through  /* Перечёркнутый текст */ text-decoration: line-through;> .overline  /* Линия над текстом */ text-decoration: overline;> .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none; > .underline  /* Нижнее подчёркивание */ text-decoration: underline; > .line-through  /* Перечёркнутый текст */ text-decoration: line-through; > .overline  /* Линия над текстом */ text-decoration: overline; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

По факту свойство text — decoration является шорткатом и позволяет указать значения для свойств:

  • text — decoration — line — положение декоративной линии;
  • text — decoration — style — стиль декоративной линии;
  • text — decoration — color — цвет декоративной линии.

Но, как правило, его используют только для указания положения линии.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Положение линии

Скопировать ссылку «Положение линии» Скопировано

Пишем свойство text — decoration и после двоеточия указываем одно из доступных значений:

  • underline — подчёркнутый текст.
  • line — through — перечёркнутый текст.
  • overline — надчёркнутый текст, линия находится над словами.
  • none — отменяет все эффекты.

Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.

Стиль линии

Скопировать ссылку «Стиль линии» Скопировано

Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

Для управления стилем линии используются следующие ключевые слова:

  • solid — сплошная линия. Значение по умолчанию.
  • double — двойная линия.
  • dotted — точечная линия.
  • dashed — пунктирная линия.
  • wavy — волнистая линия.

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

Как будет выглядеть двойное перечёркивание:

 p  text-decoration: line-through double;> p  text-decoration: line-through double; >      

Стиль линии можно указать отдельно при помощи свойства text — decoration — style .

Цвет линии

Скопировать ссылку «Цвет линии» Скопировано

Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text — decoration .

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

Например, сделаем двойное подчёркивание красного цвета:

 p  text-decoration: underline double #ff0000;> p  text-decoration: underline double #ff0000; >      

Цветом линии можно управлять отдельно при помощи свойства text — decoration — color :

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

�� Значение по умолчанию для обычного текста — none . Но для ссылок ( ) значение по умолчанию — underline .

�� Свойство text — decoration целиком нельзя анимировать при помощи свойства transition ��

Но можно анимировать цвет линии!

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

 

К диакритикам.

Дополнение подчёркивается.

Эпанортозис.

В большинстве языков.

p class="none">К диакритикам. p> p class="underline">Дополнение подчёркивается. p> p class="line-through">Эпанортозис. p> p class="overline">В большинстве языков. p>
 p  transition: text-decoration-color 0.3s;> .none  text-decoration: none;> .underline  text-decoration: underline;> .line-through  text-decoration: line-through;> .overline  text-decoration: overline;> .dotted  text-decoration-style: dotted;> .double  text-decoration-style: double;> .wavy  text-decoration-style: wavy;> .blue:hover  text-decoration-color: #1a5ad7;> .red:hover  text-decoration-color: #ed6742;> .green:hover  text-decoration-color: #49a16c;> p  transition: text-decoration-color 0.3s; > .none  text-decoration: none; > .underline  text-decoration: underline; > .line-through  text-decoration: line-through; > .overline  text-decoration: overline; > .dotted  text-decoration-style: dotted; > .double  text-decoration-style: double; > .wavy  text-decoration-style: wavy; > .blue:hover  text-decoration-color: #1a5ad7; > .red:hover  text-decoration-color: #ed6742; > .green:hover  text-decoration-color: #49a16c; >      

�� Нельзя управлять толщиной и точным положением линии, заданной при помощи text — decoration .

�� Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы : : before или : : after .

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

�� Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line — height . Чем больше высота строки, тем ниже будет полоса подчёркивания.

К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text — decoration и используем border — bottom или логический аналог border — block — end .

       О магазине   О тыквах   О нас   Контакты      

Магазин «Резная тыква»

header> div class="container top"> nav> ul class="navigation"> li class="navigation__item"> a href="#" class="navigation__link">О магазинеa> li> li class="navigation__item"> a href="#" class="navigation__link">О тыквахa> li> li class="navigation__item"> a href="#" class="navigation__link">О насa> li> li class="navigation__item"> a href="#" class="navigation__link">Контактыa> li> ul> nav> div> div class="container"> h1>Магазин «Резная тыква»h1> div> header>
 .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none;> .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor;> .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none; > .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor; >      

Открыть демо в новой вкладке + Развернуть

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text — decoration : none . Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

�� Отдельные свойства — text — decoration — line , text — decoration — style и text — decoration — color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *