<s> HTML-элемент зачёркивания

Элемент <s> HTML отображает текст зачёркнутым, то есть перечёркивает его линией. Используйте элемент <s> для обозначения того, что больше не актуально или недостоверно. Однако <s> не подходит для обозначения изменений в документе; для этого используйте элементы <del> и <ins> в зависимости от ситуации.

Попробуйте

<p><s>There will be a few tickets available at the box office tonight.</s></p>

<p>SOLD OUT!</p>

s {
  /* Add your styles here */
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

Доступность

Большинство программ чтения с экрана в конфигурации по умолчанию не сообщают о наличии элемента s. Чтобы программы чтения с экрана сообщали о нём, можно использовать свойство CSS content вместе с псевдоэлементами ::before и ::after.

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}

Некоторые пользователи программ чтения с экрана намеренно отключают озвучивание содержимого, чтобы избежать излишней многословности. Поэтому важно не злоупотреблять этим приёмом и применять его только в тех случаях, когда незнание о зачёркнутом содержимом может помешать пониманию.

• Краткая заметка о том, как сделать свою разметку более доступной | Vispero
• Настройка стилей текста: повторный разбор | Adrian Roselli

Примеры

.sold-out {
  text-decoration: line-through;
}

<s>Today's Special: Salmon</s> SOLD OUT<br />
<span class="sold-out">Today's Special: Salmon</span> SOLD OUT

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Элемент <strike>, устаревший двойник элемента <s>, больше не следует использовать на веб-сайтах.
• Если данные были удалены, вместо него следует использовать элемент <del>.
• Чтобы добиться прежнего визуального оформления элемента <s>, используйте свойство CSS text-decoration-line.