Htmlcss — Почему зачеркиваются слова на сайте


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

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: 53547b2438308e7d • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Подчеркивание ссылок и текста через CSS, свойство text-decoration

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

Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки свойства text-decoration, которое отвечает за функцию подчеркивания в CSS. Этим же способом сможете выделять mailto ссылки на адрес почты на сайте.

Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:

Но вернемся к нашему уроку по верстке и более традиционному методу.

Опиця text-decoration для подчеркивание текста в CSS

Ранее она принимала одно из базовых значений:

  • line-through — перечеркнутый текст;
  • underline — нижнее подчеркивание;
  • overline — линия сверху;
  • none — без оформления (отмена всех эффектов);
  • inherit — наследуется.

Однако в новой редакции стилей предлагаются несколько иные свойства:

  • text-decoration-color — задание цвета;
  • text-decoration-style — стиль подчеркивания текста / ссылок;
  • text-decoration-line — тип линии (из 5-ти вариантов выше);

Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…

text-decoration-color — CSS цвет подчеркивания ссылки

Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.

text-decoration-line — расположение линии оформления текста

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

  • auto — располагается максимально близко базовой линии текста;
  • under — под самой нижней границей шрифта;
  • left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами шрифта. Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

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

Как убрать подчеркивание ссылки

Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:

Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже — абзац с классом «nounder».

Как сделать подчеркивание ссылки при наведении

В CSS для этих целей содержится так называемый псевдокласс hover — по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:

Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.

Цукерберг рекомендует:  Как легко сделать из таблицы зебру

Html/css — Почему зачеркиваются слова на сайте?

Форум Приднестровской поддержки CMS XOOPS.


По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

Добро пожаловать на сайт поддержки XOOPS.

Приднестровская поддержка XOOPS

Атрибут text-decoration позволяет подчеркнуть, надчеркнуть или зачеркнуть текст. Он может принимать следующие значения:

□ попе — обычный текст (но умолчанию) :

style = «text-decoration: none» > Текст

□ underline — подчеркивает текст :

style = «text-decoration: underline» > Подчерккутый текст

□ overline — проводит линию над текстом :

style = «text-decoration: overline» > Haдчepкнyтый текст

□ line-through — зачеркивает текст :

style = «text-decoration: line-through» > 3ачеркнутый текст

□ blink — мигающий текст :

style = «text-decoration: blink» > Мигающий текст

Html/css — Почему зачеркиваются слова на сайте?

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

  1. style type = «text/css» >
  2. . fixed_text_1 <
  3. color : #FF0000; /* цвет зачеркивающей линии */
  4. >
  5. . fixed_text_1 span <
  6. color : #000000; /* цвет зачеркиваемого текста */
  7. >
  8. style >
  9. s > «fixed_text_1» > span > Исправленному span > s > верить
  10. strike > «fixed_text_1» > span > Исправленному span > strike > верить

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

Описание стилей остается таким же, как и в первом примере, меняется только тег контейнера.

  1. del > «fixed_text_1» > span > Исправленному span > del > верить
  1. style type = «text/css» >
  2. . fixed_text_2 <
  3. color : #FF0000; /* цвет зачеркивающей линии */
  4. text — decoration : line — through ;
  5. display : inline ;
  6. >
  7. . fixed_text_2 span <
  8. color : #000000; /* цвет зачеркиваемого текста */
  9. >
  10. style >
  11. div > «fixed_text_2» > span > Исправленному span > div > верить
  1. style type = «text/css» >

  2. . fixed_text_3 <
  3. position : relative ;
  4. top :- 8px ;
  5. border — bottom : 1px #FF0000 solid; /* цвет зачеркивающей линии */
  6. display : inline ;
  7. >
  8. . fixed_text_3 span <
  9. position : relative ;
  10. top : 8px ;
  11. >
  12. style >
  13. div > «fixed_text_3» > span > Исправленному span > div > верить

Единственный плюс такого способа в том, что можно задать не только непрерывный тип линии зачеркивания, но и любой другой, поддерживаемый свойством border. Также можно выбрать и толщину линии зачеркивания. Повторюсь, никогда так не делайте без крайней нужды!

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

text-decoration

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

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

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

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

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

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

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

Стилизация подчеркиваний

Дата публикации: 2020-11-02

От автора: стилизация подчеркиваний ссылок – довольно сложное занятие, и я постоянно забываю, какой способ лучше подходит в той или иной ситуации. К счастью, Джон Джеймсон поможет нам быстро разобраться в этом в своей статье.

Существует множество способов, как стилизовать подчеркивания. Возможно, вы помните статью «создаем подчеркивания ссылок на Medium». Medium не пытались делать что-то из рамок вон выходящее, они хотели просто создать привлекательные подчеркивания в тексте.

Тонкие, черные подчеркивания с пробелами вокруг букв с нижними выносками – работа Марсин Витчэри из статьи создаем подчеркивания ссылок на Medium.

Хорошее стандартное подчеркивание, которое к тому же имеет хороший размер и пропускает нижние выносные части букв. Намного лучше, чем в большинстве браузеров по умолчанию. Как оказалось, Medium столкнулись с множеством проблем на своем пути. И даже два года спустя до сих пор хорошая стилизация подчеркиваний вызывает много проблем.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Почему бы просто не использовать text-decoration: underline? Если мы говорим об идеальном сценарии, подчеркивания должны:

располагаться ниже базовой линии;

пропускать нижние выносные части букв;

менять цвет, толщину и стили;

переходить на новую строку;

работать с любыми фонами.

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

Подходы

Так какие способы есть в нашем распоряжении для подчеркивания текста? Я вспомнил следующие:

Пройдемся по всему списку и рассмотрим все плюсы и минусы каждого подхода.

Свойство text-decoration

Свойство text-decoration – самый простой способ подчеркивания текста. Нужно применить всего лишь одно свойство. На маленьком тексте такая линия будет смотреться нормально, но стоит увеличить размер шрифта и она уже смотрится неуклюже.

Самая большая проблема со свойством text-decoration – отсутствие кастомизации. Линия использует цвет и размер шрифта того текста, к которому применяется, и не существует кроссбраузерного способа изменения стилей. Чуть позже поговорим более подробно по этому свойству.

Плюсы

располагается ниже базовой линии;

пропускает нижние выносные части букв по умолчанию в Safari и iOS;

Цукерберг рекомендует:  Sql server - Golang и Sql


перепрыгивает на новую строку;

работает с любыми фонами.

Минусы

не пропускает выносные нижние части букв в остальных браузерах;

нельзя менять цвет, толщину и стили.

Свойство border-bottom

Свойство border-bottom – хороший баланс скорости и кастомизации. Данный подход использует проверенные CSS рамки, а значит, вы с легкостью можете менять цвет, толщину и стили. Так выглядит свойство border-bottom на инлайновых элементах:

Самый большой минус – это то, насколько далеко подчеркивание расположено от текста. Подчеркивание расположено ниже нижних выносных частей букв. Данная проблема решается, если сделать элемент inline-block и уменьшить line-height, но тогда теряется возможность перепрыгивать на новые строки. Хорошо подходит для одиночных строк, но не более.

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

На данный момент существует 4 свойства для стилизации подчеркивания. Намного лучше, чем просто text-decoration.

Плюсы

можно пропускать нижние выноски с помощью text-shadow;

можно менять цвет, толщину и стили;

можно использовать свойство transition и анимировать цвет и толщину;

перепрыгивает на новые строки по умолчанию, если элемент не inline-block;

работает с любым фоном, если не использовать text-shadow.

Минусы

линия расположена очень далеко и ее сложно передвинуть;

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

плохое выделение текста при использовании text-shadow.

Свойство box-shadow

Свойство box-shadow рисует подчеркивание с помощью двух внутренних теней: одна создает прямоугольник, а вторая прячет его. Это означает, что для правильной работы метода нужен однородный фон.

Такой же трюк с text-shadow можно использовать для имитации пропуска вокруг нижних выносок букв. Если цвет линии отличается от текста, или она достаточно тонкая, то проблем возникнуть не должно, как это бывает с text-decoration.

Плюсы

можно расположить под базовой линией;

можно пропускать выноски с помощью text-shadow;

можно менять цвет и толщину;

перепрыгивает на новые строки.

Минусы

нельзя менять стили;

не работает со всеми фонами.

Свойство background-image

Свойство background-image лучше всех решает наши задачи, и у него очень мало минусов. Идея заключается в том, что вы создаете изображение с помощью linear-gradient и background-position, которое повторяется по горизонтальной оси вдоль строк текста. Элемент должен быть display: inline;.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Демо ниже не использует linear-gradient. Для создания крутого эффекта, можете использовать свое изображение.

Плюсы

можно расположить ниже базовой линии;

можно пропускать нижние выноски с помощью text-shadow;

можно менять цвет, толщину (даже на полпикселя) и стили;

работает с пользовательскими изображениями;

перепрыгивает на новые строки;

работает с любым фоном, если не использовать text-shadow.

Минусы

размер изображения может по-разному меняться под разные разрешения, браузеры и уровни увеличения.

SVG фильтры

Вот с этим методом я игрался. Вы можете создать инлайновый SVG элемент filter, который будет рисовать линию, и расширить текст, чтобы замаскировать те части линии, которые должны быть прозрачными. Фильтру можно присвоить id и ссылаться на него в CSS с помощью filter: url(‘#svg-underline’).

В чем тут плюс – фильтр добавляет прозрачность, не полагаясь на text-shadow. То есть вы можете пропускать нижние выноски букв на любом фоне, в том числе градиентах и изображениях! Пример ниже работает только с одной строкой текста, так что осторожнее.

А вот так это выглядит в Chrome и Firefox:

В IE, Edge и Safari с поддержкой возникают проблемы. В CSS сложно тестировать поддержку SVG фильтров. Можно использовать правило @supports на filter, но так вы проверите только работу самой ссылки, а не то, применился ли фильтр или нет. Мой способ довольно грубо работает с браузерами, так что будьте вдвойне осторожнее.


Плюсы

расположен ниже базовой линии;

пропускает нижние выноски;

можно менять цвет, толщину и стили;

работает на любом фоне.

Минусы

не перепрыгивает на новые строки;

не работает в IE, Edge и Safari, но можно в качестве фолбэка указать text-decoration. Подчеркивания в Safari сами по себе смотрятся здорово.

Underline.js (Canvas)

Underline.js – удивительная библиотека. Меня впечатляет, что Wenting Zhang смогли сделать с JS и вниманием к деталям. Если вы еще не видели техническое демо Underline.js, остановитесь на минутку и посмотрите. В сети есть замечательное девятиминутное выступление на тему принципов работы, я вам сейчас быстро его перескажу. Подчеркивания рисуются с помощью canvas. Совершенно новый подход, который на удивление хорошо работает.

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

Эту библиотеку стоит упомянуть только лишь, как доказательство концепции. У canvas есть потенциал для создания красивых, интерактивных подчеркиваний, но для правильной работы вам придется написать дополнительный JS код.

Свойства text-decoration-*

Помните, я сказал, что чуть позже мы более подробно разберем что-то? Сейчас этим и займемся. Свойство text-decoration работает хорошо само по себе, но мы можем добавить пару экспериментальных свойств для еще лучшего вида:

Не радуйтесь раньше времени, вы же знаете о поддержке в браузерах.

Свойство text-decoration-color

Свойство text-decoration-color позволяет менять цвет подчеркивания отдельно от цвета текста. У свойства даже неплохая поддержка в браузерах. Оно работает в Firefox и с префиксом в Safari. Есть свой минус – если вы не очищаете линию вокруг выносок, в Safari она ложится поверх текста. Firefox:

Свойство text-decoration-skip

Свойство text-decoration-skip отвечает за пропуск нижних выносок в подчеркиваемом тексте.

Свойство нестандартное и на данный момент работает только в Safari. Для работы в других браузерах нужно использовать префикс –webkit-. В Safari это свойство включено по умолчанию, вот почему подчеркивания пропускают нижние выноски даже на сайтах, где это свойство не указано.

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

Свойство text-decoration-style

Свойство text-decoration-style предлагает тот же набор подчеркиваний, что и свойство border-style, но также добавляет новый вид – wavy. Возможные значения:

Прямо сейчас свойство text-decoration-style работает только в Firefox, ниже показан скриншот:

Набор однотонных подчеркиваний Выглядит похоже?

Что не так?

Свойства text-decoration-* более интуитивны по сравнению с другими свойствами для стилизации подчеркиваний. Однако если по-другому взглянуть на требования, которые мы предъявили ранее, то можно заметить, что с помощью этих свойств нельзя менять толщину и позицию. После небольшого изучения я нашел эти два свойства:

Цукерберг рекомендует:  Домашка - Маленький вопросик

Похоже, эти свойства были выброшены из ранней версии CSS из-за отсутствия интереса к ним. Они так и не применялись. Эй, я в этом не виноват.

Выводы

Так как же лучше всего подчеркивать текст? Все зависит от разных факторов.

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

Для основного текста используйте background-image. Метод работает, смотрится красиво, и для него есть Sass миксины. Если подчеркивание тонкое, или цвет отличается от текста, скорее всего, вы можете пропустить метод с text-shadow. Для текста на одной строке используйте border-bottom и любые другие свойства.

А для пропуска выносок букв на градиентных фонах или изображениях попробуйте использовать фильтра SVG. Или же просто не смешивайте такие фоны с подчеркиваниями. В будущем, когда улучшится поддержка в браузерах, можно будет использовать свойства text-decoration-*.

Автор: John Jameson

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

В этой статье мы расскажем о том, как добавить на страницу зачеркнутый текст, слово или даже одну букву.

Для этой цели в HTML есть специальный тэг — , или ещё можно записать его как , он обязательно должен иметь закрывающий тэг или .

Пример зачеркнутого текста

Вот как это будет выглядеть:

Вся строка будет зачеркнута

Зачеркнуто будет только это слово

Зачеркнем все буквы О в слове Одноклассник

Можно ли зачеркнуть текст цветом, отличным от зачеркиваемого текста?

12.03.2010, 15:42

Можно ли в Excel закрасить ячейку цветом , отличным от тех , что имеются в пользовательской палитре
Можно ли в Excel закрасить ячейку цветом , отличным от тех , что имеются в пользовательской палитре.

Заданы два текста. Определить, можно ли получить первый текст перестановкой слов второго текста.
Заданы два текста. Определить, можно ли получить первый текст перестановкой слов второго текста.

Задано 2 текста. Создать новый текст из слов первого текста, которые не входят во второй текст
Задано два текста, слова в которых разделены пробелами и знаками препинания. Разработать программу.

CSS зачеркивает другой цвет из текста?

HTML-элементы del , strike или s могут использоваться для эффекта сквозного текста. Примеры:

Свойство CSS text-decoration со значением line-through может быть использовано аналогичным образом. Код.

. также будет выглядеть так: text-decoration: line-through

Однако строка зачеркивания обычно имеет тот же цвет, что и текст.

Может ли CSS использоваться, чтобы сделать линию другим цветом?

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

(Обратите внимание, что считается устаревшим в HTML4 и устарел в HTML5 (см. также W3.org). Рекомендуемый подход заключается в использовании , если предназначен истинный смысл удаления, или иначе использовать элемент или стиль с text-decoration CSS, как в первом примере здесь.)

Чтобы сделать зачеркнутый текст для: hover, должна использоваться явная таблица стилей (объявленная или упомянутая в ). (Псевдокласс класса :hover не может применяться со встроенными атрибутами STYLE.) Например:

По состоянию на февраль 2020 года, CSS 3 имеет поддержку, указанную ниже. Вот фрагмент с одной страницы продукта WooCommerce с ценовой скидкой

CSS 3, скорее всего, будет иметь прямую поддержку, используя свойство text-decoration-color . В частности:

Свойство CSS text-decoration-color устанавливает цвет, используемый при рисовании подчеркиваний, надстроек или пропусков, указанных в text-decoration-line . Это предпочтительный способ окраски этих текстовых украшений, а не использование комбинаций других элементов HTML.

Если вы хотите немедленно использовать этот метод, вам, вероятно, придется его префикс, используя -moz-text-decoration-color . (Также укажите его без -moz- , для прямой совместимости.)

Я использовал пустой элемент :after и украсил на нем одну рамку. Вы можете даже использовать преобразования CSS, чтобы повернуть его для наклонной линии. Результат: чистый CSS, без дополнительных HTML-элементов! Даунсайд: не переносится на несколько строк, хотя ИМО вы не должны использовать зачеркивание на больших блоках текста в любом случае.

Добавив в @gojomo, вы можете использовать псевдо-элемент :after для дополнительного элемента. Единственное предостережение в том, что вам нужно определить свой innerText в атрибуте data-text , поскольку CSS имеет ограниченные функции content .

CSS

HTML

Здесь используется подход, который использует градиент для подделки линии. Он работает с многострочными ударами и не нуждается в дополнительных элементах DOM. Но поскольку это фоновой градиент, это за текстом.

Градиентные цветовые остановки и размер фона зависят от высоты линии. (Позже я использовал LESS для вычисления и Autoprefixer. )

Ответ Blazemonger (выше или ниже) требует голосования — но у меня недостаточно очков.

Я хотел добавить серый бар через 20-кратные широкие круговые кнопки CSS, чтобы указать «недоступно» и настроить «Blazemonger css»:

не самый лучший вариант. У меня был сотрудник, использующий этот метод без тестирования кросс-браузера, поэтому мне пришлось вернуться и исправить его, потому что это вызвало проблемы в firefox. Моя личная рекомендация заключалась в том, чтобы использовать: после селектора для создания зачеркивания. Таким образом, он может вернуться в IE8, если вы действительно хотите без конфликтов стиля, а также со всеми другими браузерами.

Он также создает меньше разметки и примерно такое же количество стилей, что, на мой взгляд, довольно большое дело.

Итак, если кто-то еще сталкивается с подобными проблемами, надеюсь, это может помочь:

Очевидно, вы могли бы использовать transform: translate вместо полей, но этот пример должен вернуться к IE8

Свойство text-decoration, подчёркивание и другие эффекты

Дополнительное оформление текста можно задать с помощью свойства text-decoration . Вот его значения:

  1. underline — подчёркивание;
  2. line-through — зачёркивание;
  3. overline — надчёркивание;
  4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

Свойство text-decoration — составное, а это значит, что его можно разложить на следующие свойства:

  • text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
  • text-decoration-style — стиль линии, может принимать значения:
    • solid — сплошная линия;
    • double — двойная линия;
    • dotted — точечная линия;
    • dashed — пунктирная линия;
    • wavy — волнистая линия.
  • text-decoration-color — цвет линии.
  • index.html Сплит-режим
  • style.css Сплит-режим

День одиннадцатый. Без фанатизма

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих