CSS: перечеркнутый по диагонали текст
Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
Code: Убрать нумерацию
- .striked {
- position: relative;
- }
- .striked:before {
- position: absolute;
- width: 100%;
- height: 50%;
- content: '';
- border-bottom: 4px solid #FF0000;
- pointer-events: none;
- }
Code: Убрать нумерацию
- .up::before {
- transform: rotate(-5deg);
- }
- .down::before {
- transform: rotate(5deg);
- }
Code (HTML) : Убрать нумерацию
- <div><span class="striked up">Исправленному</span> верить.</div>
- <div><span class="striked down">Исправленному</span> верить.</div>
Просмотров: 4808 | Комментариев: 2
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
ManHunter
(19.04.2018 в 22:54):
Разумно. Добавил, спасибо.
Infocatcher
(19.04.2018 в 20:11):
Для пущего удобства пользователей можно еще добавить псевдоэлементу с зачеркивающей линией
pointer-events: none;
https://developer.mozilla.org/...inter-events
pointer-events: none;
https://developer.mozilla.org/...inter-events
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,351 раз
Поблагодарили 34,351 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |