Html тег перечеркнутый текст

Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:

• Через html теги , и
• Через свойство CSS text-decoration

1. Зачеркнутый текст через html теги , и

Весь текст заключенные в html теги , и становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова "strike".

Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).

Преобразуется на странице в

Обычный шрифт. Зачеркнутый текст через тег s

Обычный текст. Зачеркнутый текст через тег strike

Обычный текст. Зачеркнутый текст через тег del

2. Зачеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.

Синтаксис CSS text-decoration

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

Нас интересует значение line-through , которое задает зачеркивание текста.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изменить цвет линии

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

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

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

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

Тегу задается цвет линии, вложенному цвет текста.

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

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

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