Создать зачеркнутый заголовок на CSS
Создать заголовок с эффектом зачеркивания. Создается с помощью псевдо-элементов и .
Оба псевдо-элемента применяются только к одному элементу — заголовку определенного уровня и дополнительной разметки не требуется, все семантично. Линии подчеркивания имеют фиксированную ширину с обеих сторон, что упрощает задачу. Положение линий по вертикали — точно по центру.
Создание такого эффекта выполняется простым кодом. Первоначально задаем HTML-разметку с использованием заголовка первого уровня :
И прописываем для него CSS-правила, чтобы привести его к тому виду, который нам необходим:
Выравнивание по центру, размер шрифта (кегль) и высота блока через интерлиньяж , делаем все буквы заглавными — все стандартно. Но не забываем о позиционировании, которое устанавливаем относительным, ибо оно потребуется нам для псевдо-элементов и .
Теперь создаем общие правила для обоих псевдо-элементов и .
Единственным примечательным моментом в этом коде является свойство , которое размещает линию точно по центру вертикали блочного элемента. В нашем случае таким блочным элементом является заголовок первого уровня . Кроме того, нужно установить еще одно правило — .
Этим правилом мы поднимаем сгенерированные линии вверх на половину их высоты. Почему это нужно делать, можно догадаться и так.
Так как правила мы прописали для обоих элементов, то следуют переписать некоторые из них для элемента . Точнее — нам нужно только правило , чтобы “сдвинуть” его вправо:
Результат работы кода показан на рисунке ниже. Граница для заголовка задана мною для наглядности:
Полностью весь код для создания такого эффекта приведен ниже:
UPD 19\01\2014
Для быстроты, удобства и краткости можно воспользоваться готовым миксином из библиотеки Scut — Side-Lined.
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Перечёркнутый текст
Первыми тегами для зачёркнутого текста были <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 и теги html
Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:
- Через html теги <s> , <strike> и <del>
- Через свойство CSS text-decoration
1. Зачеркнутый текст через html теги <s>, <strike> и <del>
Весь текст заключенные в html теги <s></s> , <strike></strike> и <del></del> становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова «strike».
Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега <del></del> считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).
Преобразуется на странице в
Обычный шрифт. Зачеркнутый текст через тег s
Обычный текст. Зачеркнутый текст через тег strike
Обычный текст. Зачеркнутый текст через тег del
2. Зачеркнутый текст через свойство CSS text-decoration
В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.
Синтаксис CSS text-decoration
- none — текст без оформления
- underline — нижнее подчеркивание
- overline — верхнее подчеркивание
- line-through — зачеркивание текста
- blink — мерцающий текст (рекомендуется не применять это значение)
Нас интересует значение line-through , которое задает зачеркивание текста.
Как сделать в HTML и CSS зачеркнутый текст?
Периодически, при размещении на сайте какой-либо информации, возникает необходимость обратить внимание посетителей на какую-то часть текста, которая утратила свою уникальность, или на данный момент является не верной. В этом случае мы можем использовать такой элемент декорирования как перечеркнутый текст.
Навигация по статье:
Давайте рассмотрим, как сделать в HTML и CSS зачеркнутый текст.
Как сделать в CSS зачеркнутый текст?
Для декорирования текста перечеркнутой линией в CSS мы можем использовать CSS-свойство text-decoration со значением line-through. Во как это будет выглядеть в CSS-стилях:
зачеркнутый текст CSS
Данный вариант удобнее всего использовать для оформления какого-то большого блока. Или же вы можете сделать заготовку для определенного класс в CSS-стилях, а в дальнейшем просто присваивать для нужного блока, для которого удобнее сделать в CSS зачеркнутый текст.
Как сделать в HTML зачеркнутый текст?
На много проще, на мой взгляд, для оформления каких-то отдельных фрагментов использовать специальные теги HTML для зачеркнутого текста. Нам доступно для использования три тега: