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

В среде 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 с приведенными ниже атрибутами.

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

Есть возможность сделать линию определенного цвета с применением свойства 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. При создании документа необходимо всего-лишь правильно указать стиль для выбранного элемента. Это ускоряет работу и минимизирует повторения в коде, что отражается как на валидации, его длине, так и на визуальном восприятии.