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

В среде HTML зачеркнутый текст возможно прописать при помощи тегов и таблиц стилей CSS.

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

Для более точной настройки визуализации контента лучшим будет применение свойств CSS, которые выполняются при назначении к элементу.

Зачеркнутый текст при помощи тегов

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

<strike>Зачеркнутый текст</strike>
<s>Зачеркнутый текст</s>
Зачеркнутый текст с использованием тегов s и strike

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

<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%;
}
Зачеркнутый текст при помощи псевдо элемента before

При этом появляется возможность расположения линии за текстом.

<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;
}
Зачеркнутый текст сзади с помощью псевдоэлемента before

Выводы

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

Оставьте комментарий

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