Перечеркивание текста или картинки

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

В заголовке можно нельзя зачеркнуть слово

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


А еще может понадобиться перечеркнуть целый абзац текста. Так как это сделано ниже.

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

А еще так можно выделить текст на который следует обратить внимание. Перечеркивание можно использовать в комбинации с другими стилями. Например, так как мы это сделали для цитаты в тексте. Главное условие - не перестараться с перечеркиванием. По крайне мере, старайтесь, чтобы два зачеркнутых блока не находились рядом. Зачеркнуть можно практически любой контейнер на странице. А теперь расскажем как это делается. Для начала нам понадобится css-стиль:

del.cross {
 display:inline-block; 
 text-decoration:none;
 position:relative;
 }
 .del-cross {
 display:block;
 position:relative;
 overflow:hidden; 
 }
 del.cross:before,
 .del-cross:before {
 content:'';
 position:absolute;
 display:block;
 width:auto;
 height:auto;
 left:0;
 top:0;
 right:0;
 bottom:0;
 background: rgba(0,0,0,0) url(/demo/cross/cross.svg) no-repeat;
 background-size:100% 100%; 
 }
 /* Деградация */
 .lt-ie9 del.cross {
 display:inline;
 text-decoration: line-through;
 }
 .lt-ie9 .del-cross {
 text-decoration: line-through;
 }

Для самого перечеркивания использовано svg-изображение. Посмотреть и забрать его можно здесь. И в завершение приведем пару примеров html-кода контейнеров с перечеркиванием:
<h3>Заголовок <del class="cross">нельзя</del> зачеркнуть</h3> <p class="del-cross">текст блока зачеркнутого</p>