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

Свойство text-decoration

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

Применяется: ко всем элементам;
Наследование: отсутствует;
Проценты: не используются;
Медиа : визуальные.

Примечание

В CSS 3 можно устанавливать дополнительно цвет и тип линии.

JavaScript

[объект] .style .textDecoration ="[значение]";

Поддержка браузерами

[1] ‒ поддерживает синтаксис CSS 2-2.2.

Спецификация

CSS Раздел
1 5.4.3 ‘text-decoration’ Перевод
2 16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.1 16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.2 16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
3 2.4. Text Decoration Shorthand: the ‘text-decoration’ property

Значения

none Указывает на отсутствие элементов декора. underline Подчёркивает текст.

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

overline Устанавливает линию над текстом.

Текст с надчёркиванием

line-through Перечёркивает текст.

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

blink Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров.) <text-decoration-line> Задаёт тип элемента декора. <text-decoration-style> Задаёт стиль элемента декора. <text-decoration-color> Задаёт цвет элемента декора. inherit Указывает, что элемент должен унаследовать параметры родительского элемента.

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

CSS зачеркнутый текст

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

Навигация по статье:

Давайте рассмотрим, как сделать в HTML и CSS зачеркнутый текст.

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

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

зачеркнутый текст CSS

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

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

На много проще, на мой взгляд, для оформления каких-то отдельных фрагментов использовать специальные теги HTML для зачеркнутого текста. Нам доступно для использования три тега:

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

В среде HTML зачеркнутый текст возможно прописать при помощи тегов и таблиц стилей CSS.

Чтобы просто отобразить перечеркнутый текст, нужно воспользоваться тегом.

Для более точной настройки визуализации контента лучшим будет применение свойств CSS, которые выполняются при назначении к элементу.

Зачеркнутый текст при помощи тегов

Первым тегом, применяющимся для зачеркивания текста, является <strike>. Аналог &#8212; тег <s>, который имеет сокращенную форму написания, как: <u> (подчеркнутый), <i> (курсив), <b> (выделенный). Использование тегов <s> и <strike> для зачеркивания текста не одобряется со спецификаций HTML 4, а в HTML 5 их применение вообще запрещено.

Зачеркнутый текст с использованием тегов s и strike

На их смену ввели тег <del>, который выделяет текст как удаленный, что по семантике более правильно. В отображении различий между тегами нет.

Зачеркнутый текст с использованием тега del

Перечеркнутый текст с применением CSS

Оформить зачеркнутый текст возможно при использовании стилей CSS. Для этого применяется свойство text-decoration. При использовании необходимых атрибутов возможно не только выводить перечеркнутый текст, но и подчеркнутый сверху, снизу или мигающий. Если необходимо отобразить несколько линий, значения необходимо вводить через пробел.

Значения
  • line-through &#8212; линия зачеркивает слово
  • underline &#8212; линия подчеркивает слово
  • overline &#8212; линия накрывает слово
  • blink &#8212; задает мигание текста (1 раз в секунду)
  • inherit &#8212; значение берется от родительского атрибута
  • none &#8212; производит отмену всех эффектов, также и подчеркивание ссылок

При необходимости возможно поменять вид линии. Используется свойство text-decoration-style с приведенными ниже атрибутами.

Атрибут Значение Пример
solid одинарная слово
wavy волнистая слово
double двойная слово
dashed пунктирная слово
dotted точечная слово
Изменение цвета линии

Есть возможность сделать линию определенного цвета с применением свойства text-decoration-color.

Пример текста, зачеркнутого оранжевой линией

Задав цвет линии тегу <del>, возможно задать цвет текста вложенному тегу <span>.

Пример задания нужного цвета тексту и линии

Использовав псевдоэлемент :before можно установить нужную толщину линии, ее положение и цвет. При этом текст должен быть без переносов.

Зачеркнутый текст при помощи псевдо элемента before

При этом появляется возможность расположения линии за текстом.

Зачеркнутый текст сзади с помощью псевдоэлемента before

Выводы

Использование стилей CSS предоставляет наиболее полную визуализацию для отображения контента в HTML. С созданием библиотеки стилей CSS появляется возможность задавать определенные стили для вложений, классов, id. При создании документа необходимо всего-лишь правильно указать стиль для выбранного элемента. Это ускоряет работу и минимизирует повторения в коде, что отражается как на валидации, его длине, так и на визуальном восприятии.

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

Первыми тегами для зачёркнутого текста были <strike> и <s> .

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del> , он помечает текст как удаленный, что семантически правильнее.

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью 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> задается цвет линии, вложенному <span> цвет текста.

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

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

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

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b839e55cb5a24bd • Your IP : 89.162.247.52 • Performance & security by Cloudflare

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

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