Blog. Just Blog

CSS: перечеркнутый по диагонали текст

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Ранее я уже выкладывал статью о том, как можно сделать текст, перечеркнутый линией другого цвета. Там линия была строго горизонтально. Сегодня будет похожая задача, но только зачеркивающая линия будет проходить по диагонали.

Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
  1. .striked {
  2.     positionrelative;
  3. }
  4.  
  5. .striked:before {
  6.     positionabsolute;
  7.     width100%;
  8.     height50%;
  9.     content'';
  10.     border-bottom4px solid #FF0000;
  11.     pointer-eventsnone;
  12. }
Угол и направление наклона линии регулируется дополнительными стилями:
  1. .up::before {
  2.     transformrotate(-5deg);
  3. }
  4. .down::before {
  5.     transformrotate(5deg);
  6. }
В коде HTML-страницы это выглядит примерно так:
  1.     <div><span class="striked up">Исправленному</spanверить.</div>
  2.     <div><span class="striked down">Исправленному</spanверить.</div>
Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 577 | Комментариев: 2

Комментарии

Отзывы посетителей сайта о статье
ManHunter (19.04.2018 в 22:54):
Разумно. Добавил, спасибо.
Infocatcher (19.04.2018 в 20:11):
Для пущего удобства пользователей можно еще добавить псевдоэлементу с зачеркивающей линией
pointer-events: none;
https://developer.mozilla.org/...inter-events

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0036 сек.) / Память: 5 Mb
Наверх