В среде HTML зачеркнутый текст возможно прописать при помощи тегов и таблиц стилей CSS.
Чтобы просто отобразить перечеркнутый текст, нужно воспользоваться тегом.
Для более точной настройки визуализации контента лучшим будет применение свойств CSS, которые выполняются при назначении к элементу.
Зачеркнутый текст при помощи тегов
Первым тегом, применяющимся для зачеркивания текста, является <strike>. Аналог – тег <s>, который имеет сокращенную форму написания, как: <u> (подчеркнутый), <i> (курсив), <b> (выделенный). Использование тегов <s> и <strike> для зачеркивания текста не одобряется со спецификаций HTML 4, а в HTML 5 их применение вообще запрещено.
<strike>Зачеркнутый текст</strike>
<s>Зачеркнутый текст</s>

На их смену ввели тег <del>, который выделяет текст как удаленный, что по семантике более правильно. В отображении различий между тегами нет.
<del>Зачеркнутый текст</del>

Перечеркнутый текст с применением CSS
Оформить зачеркнутый текст возможно при использовании стилей CSS. Для этого применяется свойство text-decoration. При использовании необходимых атрибутов возможно не только выводить перечеркнутый текст, но и подчеркнутый сверху, снизу или мигающий. Если необходимо отобразить несколько линий, значения необходимо вводить через пробел.
Значения
- line-through – линия зачеркивает слово
- underline – линия подчеркивает слово
- overline – линия накрывает слово
- blink – задает мигание текста (1 раз в секунду)
- inherit – значение берется от родительского атрибута
- none – производит отмену всех эффектов, также и подчеркивание ссылок
При необходимости возможно поменять вид линии. Используется свойство text-decoration-style с приведенными ниже атрибутами.
Атрибут | Значение | Пример |
solid | одинарная | |
wavy | волнистая | |
double | двойная | |
dashed | пунктирная | |
dotted | точечная |
Изменение цвета линии
Есть возможность сделать линию определенного цвета с применением свойства text-decoration-color.
<del class="txt">Зачеркнутый текст</del>
.txt {
text-decoration: line-through;
text-decoration-color: orange;
}

Задав цвет линии тегу <del>, возможно задать цвет текста вложенному тегу <span>.
<del class="txt">
<span>Зачеркнутый текст<span>
</del>
.txt {
text-decoration: line-through;
text-decoration-color: orange;
}
.txt span {
color: green;
}

Использовав псевдоэлемент :before можно установить нужную толщину линии, ее положение и цвет. При этом текст должен быть без переносов.
<del class="txt">Зачеркнутый текст</del>
.txt {
position: relative;
color: #1E5945;
text-decoration: none;
}
.txt:before {
content: "";
border-bottom: 3px solid blue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 55%;
}

При этом появляется возможность расположения линии за текстом.
<del class="txt">Зачеркнутый текст</del>
.txt {
position: relative;
color: 000;
text-decoration: none;
}
.txt:before {
content: "";
border-bottom: 3px solid aqua;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45%;
z-index: -1;
}

Выводы
Использование стилей CSS предоставляет наиболее полную визуализацию для отображения контента в HTML. С созданием библиотеки стилей CSS появляется возможность задавать определенные стили для вложений, классов, id. При создании документа необходимо всего-лишь правильно указать стиль для выбранного элемента. Это ускоряет работу и минимизирует повторения в коде, что отражается как на валидации, его длине, так и на визуальном восприятии.