CSS: текст, зачеркнутый линией другого цвета

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

Первый вариант, которым и была решена задача, - использование HTML-тега <s> или <strike>. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.Если почитать документацию по HTML, то там написано, что вместо этих тегов рекомендуется использовать тег <del>. Кроме визуального эффекта, он является еще и семантически более правильным, если требуется выделить текст, который утратил актуальность.

Описание стилей остается таким же, как и в первом примере, меняется только тег контейнера.Следующий пример основан на свойстве CSS text-decoration, а точнее на его значении line-through. В этом случае содержимое контейнера будет перечеркнуто горизонтальной линией. Нам остается только задать в стилях цвет зачеркивающей линии и цвет текста содержимого контейнера.Заключительный пример показан только как еще один вариант решения задачи, на практике его лучше не использовать, тем более, что он не работает в браузере Internet Explorer. Этот способ основан на том, что контейнеру и содержимому присваивается атрибут position:relative, а затем контейнер с перечеркивающей линией и зачеркиваемый текст сдвигаются относительно друг друга по вертикали. Перечеркивающей линией в данном случае является нижняя граница контейнера, а цвет текста и контейнера не меняется.Единственный плюс такого способа в том, что можно задать не только непрерывный тип линии зачеркивания, но и любой другой, поддерживаемый свойством border. Также можно выбрать и толщину линии зачеркивания. Повторюсь, никогда так не делайте без крайней нужды!

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

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

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