Как сделать перечеркнутый текст css
Перейти к содержимому

Как сделать перечеркнутый текст css

  • автор:

Как сделать зачеркнутый текст на сайте?

Для того чтобы сделать зачеркнутый текст на сайт понадобится специальный тег html и стиль css. С появлением html5 в арсенале верстальщиков появился тег del. Тег необходим для разметки удаленного, потерявшего важность контента. Именно его стоит использовать для создания, зачеркнутого или перечеркнутого текста.

Зачеркнутый текст html css

 Любой текст, коротый вы хотите зачеркнуть del

По умолчанию текст и линия будут оформлены в базовые цвета. Шрифт так же будет браться из класса body (если прописано правило для шрифтов на сайте). Чтобы это исправить пропишите css класс зачеркнутого или перечеркнутого текста. Делаем это, как и для других стилей и классов.

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

Зачеркнутый текст на сайте через CSS и теги html

Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:

  • Через html теги , и
  • Через свойство CSS text-decoration

1. Зачеркнутый текст через html теги , и

Весь текст заключенные в html теги , и становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова «strike».

Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).

p>Обычный шрифт. s>Зачеркнутый текст через тег s/s>/p> p>Обычный текст. strike>Зачеркнутый текст через тег strike/strike>/p> p>Обычный текст. del>Зачеркнутый текст через тег del/del>/p>

Преобразуется на странице в

Обычный шрифт. Зачеркнутый текст через тег s

Обычный текст. Зачеркнутый текст через тег strike

Обычный текст. Зачеркнутый текст через тег del

2. Зачеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.

Синтаксис CSS text-decoration

text-decoration: none|underline|overline|line-through|inherit;
  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение line-through , которое задает зачеркивание текста.

html> head> style> .del< text-decoration: line-through; > /style> /head> body> div class css">del">Текст со свойством text-decoration: line-through/div> /body> /html>

Преобразуется на странице в

text-decoration

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline :

/*делаем подчёркнутый текст*/ span

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none :

/*убираем подчёркивание ссылок*/ a

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

/*убираем подчёркивание ссылок*/ a /*задаём подчёркивание ссылок при наведении*/ a:hover

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration , будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: (подчёркнутый текст) и (зачёркнутый текст).

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.textDecoration=»overline»

Синтаксис

text-decoration: none|underline|overline|line-through|inherit;

Значения свойства

Значение Описание
none Оставляет текст без изменений.
underline Определяет горизонтальную линию под текстом.
overline Определяет горизонтальную линию над текстом.
line-through Определяет линию перечеркивающую текст.
inherit Указывает, что значение наследуется от родительского элемента.

Перечёркнутый текст

Перечёркнутый текст

С помощью CSS свойства text-decoration-color , который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

Перечёркнутый текст

Также можно изменить стиль линии с помощью text-decoration-style .

Значение Описание Пример
text-decoration-style: solid; Одинарная линия Текст
text-decoration-style: double; Двойная линия Текст
text-decoration-style: dotted; Точечная линия Текст
text-decoration-style: dashed; Пунктирная линия Текст
text-decoration-style: wavy; Волнистая линия Текст

Второй способ

Тегу задается цвет линии, вложенному цвет текста.

 Текст зачёркнут красной линией 
del < color: red; text-decoration: line-through; >del span

Третий способ

Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.

Перечёркнутый текст
del < position: relative; color: #000; text-decoration: none; >del:before

При такой реализации, можно расположить линию за текстом.

del < position: relative; color: #000; text-decoration: none; >del:before

21.08.2019, обновлено 30.08.2019
Предыдущая запись Ведущие нули у ol
Следующая запись Перечёркивание текста по диагонали

Комментарии

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Список MIME типов

Ниже приведён список MIME-заголовков и расширений файлов.

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом hr разных видов и стилей.

Генерация QR-кода в PHP

Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *