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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html> head> style> .del< text-decoration: line-through; > /style> /head> body> div class css">del">Текст со свойством text-decoration: line-through/div> /body> /html>

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

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

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

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

Электроник
Сыроежкин
Смирнов
Чижиков
Кукушкина

Данный тег не имеет атрибутов. Вместо тега 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 сайтов "Нубекс"

Перечёркнутый текст

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

Перечёркнутый текст

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

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

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

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

 Текст зачёркнут красной линией

del < color: red; text-decoration: line-through; >del span

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

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

Перечёркнутый текст

del < position: relative; color: #000; text-decoration: none; >del:before

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

del < position: relative; color: #000; text-decoration: none; >del:before

21.08.2019, обновлено 30.08.2019
Предыдущая запись Ведущие нули у ol
Следующая запись Перечёркивание текста по диагонали

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

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

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

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом hr разных видов и стилей.

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

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

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 эта ошибка исправлена.