Как перечеркнуть текст в css

Перечеркнутый текст в CSS реализуется с помощью свойства text-decoration. Чтобы применить стандартное пересечение, используется значение line-through, которое корректно поддерживается всеми современными браузерами и не требует дополнительных библиотек.

Для точной настройки внешнего вида линии можно комбинировать text-decoration с новыми свойствами CSS, такими как text-decoration-color, text-decoration-thickness и text-decoration-style. Например, установка толщины в пикселях и цвета позволяет создавать акцентированные перечеркивания без изменения размера шрифта.

Перечеркнутый текст также можно создавать через псевдоэлементы ::before и ::after с абсолютным позиционированием и фоном, если требуется динамическая анимация или частичное пересечение текста. Этот метод особенно полезен для декоративных эффектов и интерактивных интерфейсов.

Для оптимизации читаемости важно учитывать высоту строки и вертикальное выравнивание текста. Неправильно заданное line-height может сместить линию перечеркивания вверх или вниз относительно текста. Рекомендуется тестировать отображение на разных устройствах и разрешениях.

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

Использование свойства text-decoration для перечеркивания

Свойство text-decoration в CSS позволяет создавать перечеркнутый текст с минимальными усилиями. Для этого используется значение line-through, которое добавляет горизонтальную линию через каждую строку текста.

Пример применения: text-decoration: line-through;. Оно работает на любом блочном или строчном элементе, включая span, p и a.

Дополнительно text-decoration поддерживает комбинирование значений через пробел. Например, text-decoration: underline line-through; одновременно подчеркнет и перечеркнет текст.

Для точного контроля линии используют свойства text-decoration-color и text-decoration-thickness. text-decoration-color задает цвет линии, а text-decoration-thickness – толщину. Это позволяет выделить перечеркнутый текст без изменения шрифта или фона.

Современный синтаксис text-decoration объединяет все параметры в одной строке:

text-decoration: line-through solid red 2px;, где line-through – стиль линии, solid – тип линии, red – цвет, 2px – толщина.

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

Перечеркнутый текст через text-decoration-line

Свойство text-decoration-line позволяет управлять линиями текста без использования сложных псевдоэлементов. Для перечеркивания применяют значение line-through: text-decoration-line: line-through;. Оно работает во всех современных браузерах и сохраняет возможность комбинировать несколько линий через пробел, например: underline line-through.

Рекомендуется сочетать text-decoration-line с text-decoration-color для точного контроля цвета линии и text-decoration-thickness для толщины. Пример: text-decoration-line: line-through; text-decoration-color: red; text-decoration-thickness: 2px;.

Для динамических эффектов можно применять text-decoration-skip-ink: none;, чтобы линия проходила через все символы без пропусков, что особенно полезно для шрифтов с нестандартными засечками.

Свойство поддерживает наследование, поэтому при необходимости применять перечеркнутый стиль ко всему блоку текста, достаточно установить его на родительском элементе, экономя повторное оформление каждого span или p.

Настройка цвета и толщины линии через text-decoration-color и text-decoration-thickness

Свойство text-decoration-color позволяет задать конкретный цвет для перечёркивания текста, независимо от цвета самого текста. Оно принимает:

• имя цвета: red, blue;
• HEX-значение: #ff0000;
• RGB/RGBA: rgb(255,0,0), rgba(255,0,0,0.5);
• HSL/HSLA: hsl(0,100%,50%), hsla(0,100%,50%,0.5).

Пример использования:

p {
text-decoration-line: line-through;
text-decoration-color: crimson;
}

Свойство text-decoration-thickness задаёт толщину линии перечёркивания. Значения могут быть:

• абсолютные: 2px, 0.1em;
• процентные: 10% – относительно высоты шрифта;
• ключевые: auto – браузер выбирает стандартную толщину.

Пример применения с точной толщиной:

p {
text-decoration-line: line-through;
text-decoration-color: #1a73e8;
text-decoration-thickness: 2px;
}

Рекомендации по использованию:

1. Для контраста линии и текста выбирайте цвет с достаточной разницей яркости.
2. Толщину менее 1px использовать не стоит, чтобы линия оставалась видимой на всех экранах.
3. Процентные значения удобны для адаптивного дизайна: линия масштабируется с размером шрифта.

Комбинируя text-decoration-color и text-decoration-thickness, можно создавать аккуратные и визуально заметные перечёркивания без использования псевдоэлементов.

Создание анимации перечеркивания с помощью CSS

Пример базовой структуры:

.strike-animation {
position: relative;
display: inline-block;
}
.strike-animation::after {
content: '';
position: absolute;
left: 0;
bottom: 50%;
width: 0;
height: 2px;
background-color: currentColor;
transition: width 0.3s ease;
}
.strike-animation:hover::after {
width: 100%;
}

Рекомендации по улучшению анимации:

• Использовать currentColor для линии, чтобы цвет автоматически соответствовал тексту.
• Регулировать bottom для точного попадания линии по центру текста, особенно при разных шрифтах.
• Применять transition-timing-function для более естественного движения, например cubic-bezier(0.4, 0, 0.2, 1).
• Добавлять overflow: hidden к родительскому элементу для предотвращения выхода линии за границы.

Для более сложной анимации можно использовать @keyframes:

@keyframes strike {
0% { width: 0; }
50% { width: 50%; }
100% { width: 100%; }
}
.strike-keyframes::after {
content: '';
position: absolute;
left: 0;
bottom: 50%;
height: 2px;
background-color: currentColor;
animation: strike 0.5s forwards;
}

Практические советы:

1. Для динамических эффектов используйте разные скорости анимации для ширины и прозрачности линии.
2. Чтобы анимация работала при загрузке страницы, добавляйте класс с задержкой через setTimeout или animation-delay.
3. Для мобильных устройств убедитесь, что линия остается четкой при масштабировании, задавая height в пикселях, а не в относительных единицах.

Перечеркивание только части текста с помощью span

Для выделения части текста перечёркиванием используется тег с применением CSS-свойства text-decoration. Это позволяет сохранить остальной текст без изменений и управлять стилем конкретного фрагмента.

Пример применения: <p>Цена со скидкой: <span class="strike">1000₽</span> 800₽</p>. В CSS задаём: .strike { text-decoration: line-through; }. Этот метод работает для отдельных слов, цифр и символов.

Для более тонкого контроля можно использовать свойства text-decoration-color и text-decoration-thickness. Например: .strike { text-decoration: line-through; text-decoration-color: red; text-decoration-thickness: 2px; }. Это позволяет менять цвет и толщину линии без затрагивания остального текста.

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

Использование для частичного перечеркивания предпочтительнее, чем отдельные теги или для всего абзаца, так как обеспечивает точечное оформление и совместимость с современными CSS-свойствами.