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 символов)*:

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

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