Как сделать линию зачёркивания другого цвета в CSS

Быстрый ответ

Чтобы придать зачеркиванию текста в CSS особый цвет, используйте свойство text-decoration-color:

<!-- Все мы обожаем расцветки, не так ли? -->
<span style="text-decoration: line-through; text-decoration-color: red; color: blue;">Текст синего оттенка с красным зачеркиванием. Неожиданно и привлекательно!</span>

Такой код сформирует зачеркивание красного цвета на синем фоне текста, придав особенный колорит вашему сайту.

Подробное применение и примеры использования

Приступим к детальному разбору приемов и ключевых аспектов работы с цветным зачеркиванием.

Создание оригинального зачеркивания

Применение CSS псевдо-элемента ::after и свойства border-top позволит вам тонко настроить эффект зачеркивания. Этот метод идеально подойдет, если вам требуется наклонная линия зачеркивания или точная регулировка ее позиции по отношению к тексту:

/* Поскольку прямые линии — это слишком банально */
.strikethrough-custom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid red;
  transform: rotate(-10deg);
}

Подробнее об этом расскажет наш спикер на видео

Совместимость с браузерами

Свойство text-decoration-color обеспечивает хорошую совместимость с большинством современных браузеров. Однако стоит учитывать, что при работе с Edge или IE (Internet Explorer) могут возникнуть проблемы с отображением. Поэтому всегда проверяйте совместимость с различными версиями браузеров и предусматривайте альтернативные варианты для пользователей.

Дизайнерские аспекты

Выбирайте контрастные цвета для зачеркивания и текста для обеспечения комфортного восприятия. Тестируйте ваш дизайн на разных устройствах, чтобы поддерживать визуальные стандарты.

Дополнительные советы

Используйте метод ::after осторожно, особенно при работе с большими блоками текста, чтобы не вызвать снижение производительности. И помните о возможных конфликтах стилей из-за применения !important в CSS.

Визуализация

Готовы ли вы внедрить цветное зачеркивание в ваш дизайн?

Давайте визуализируем его:

Представьте, что текст в text-decoration окрашен в прекрасный зеленый цвет 🟢:

Текст: "Распродажа"

Теперь добавим красное зачеркивание 🔴:

Зачеркивание: "——"

Получилось вот такое стильное сочетание цветов:

Итог: "З̶а̶к̶р̶ы̶т̶о̶" с зеленым текстом и красным зачеркиванием.

При этом процесс очень напоминает работу с двумя слоями краски!

Специальные эффекты и случаи

Применение эффектов на наведение

Создайте интерактивный эффект зачеркивания с помощью псевдокласса :hover. Но учтите, что в IE7 такой эффект сработает только, если у ссылки указан атрибут href.

Реализация наклонных зачеркиваний

Сделайте ваш дизайн более динамичным, создав наклонные зачеркивания с помощью CSS трансформаций на псевдо-элементе ::after.

Зачеркивание с анимацией

Создавайте увлекательные зачеркивающие линии с помощью ключевых кадров (@keyframes) и анимаций в CSS.

Будущие возможности CSS3

Отслеживайте новые возможности CSS3, такие как свойство text-decoration-thickness, позволяющее регулировать толщину зачеркивания.

Полезные материалы

1. text-decoration | CSS-Tricks — Подробная статья о свойствах text-decoration в CSS.
2. text-decoration-color – CSS: Cascading Style Sheets | MDN — Официальная документация по свойству text-decoration-color.
3. CSS text-decoration property — Инструкции и примеры использования свойства text-decoration.
4. ::after – CSS: Cascading Style Sheets | MDN — Все, что вам нужно знать о псевдо-элементе ::after.
5. A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks — Креативное использование псевдо-элементов ::before и ::after.
6. CSS Text Decoration Module Level 4 — Развивающиеся стандарты форматирования текста CSS от W3C.
7. "text-decoration-thickness" | Can I use... — Информация о поддержке свойства text-decoration-thickness в браузерах.