Как сделать в HTML и CSS зачеркнутый текст?

Приветствую вас, дорогие друзья!

Периодически, при размещении на сайте какой-либо информации, возникает необходимость обратить внимание посетителей на какую-то часть текста, которая утратила свою уникальность, или на данный момент является не верной. В этом случае мы можем использовать такой элемент декорирования как перечеркнутый текст.

Давайте рассмотрим, как сделать в HTML и CSS зачеркнутый текст.

Как сделать в CSS зачеркнутый текст?

Для декорирования текста перечеркнутой линией в CSS мы можем использовать CSS-свойство text-decoration со значением line-through. Во как это будет выглядеть в CSS-стилях:

Данный вариант удобнее всего использовать для оформления какого-то большого блока. Или же вы можете сделать заготовку для определенного класс в CSS-стилях, а в дальнейшем просто присваивать для нужного блока, для которого удобнее сделать в CSS зачеркнутый текст.

Как сделать в HTML зачеркнутый текст?

На много проще, на мой взгляд, для оформления каких-то отдельных фрагментов использовать специальные теги HTML для зачеркнутого текста. Нам доступно для использования три тега:

• <strike> — устаревший тег, который запрещен для использования в HTML5. Страницы, содержащие данный тег не пройдут валидность. Не рекомендован к использованию
• <s> — сокращение от <strike>. Имеет такие же ограничения в использовании
• <del> — поддерживается спецификацией HTML5, и рекомендован к использованию.

Пример использования тега <del>:

Результат:

Использование тега <strike> рекомендовано для использования при оформлении HTML-документов.

Надеюсь, данная информация будет для вас полезной, и показанные здесь приемы работы со стилями и тегами позволят вам более комфортно и продуктивно оформлять страницы для вашего сайта.

Не забывайте подписаться на мою рассылку и поделиться статьей в социальных сетях.

До встречи в следующих статьях!

С уважением Юлия Гусарь