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

Добавил пользователь Дмитрий К.
Обновлено: 04.10.2024

Конфигурация компьютера
Процессор: DualCore Intel Core 2 Duo E6750, 2666 MHz
Материнская плата: Asus P5K WS
Память: 2 х 1024 Mb
HDD: Seagate ST3500320AS (500 Gb, 7200 RPM, SATA-II), Seagate ST3320620AS (320 Gb, 7200 RPM, SATA-II), Hitachi HDS721680PLA380 (80 Gb, 7200 RPM, SATA-II)
Видеокарта: NVIDIA GeForce 8600 GTS (256 Мб)
Звук: Realtek ALC888/S/T @ Intel 82801IB ICH9
Монитор: ASUS VW 222U, 22"
ОС: MS Windows XP Professional SP2, RUS
Прочее: Клавиатура: Logitech WAVE, Мышь: Razer DeathAdder GuildWars, Ковер: Razer Mantis

вот тут есть
*Как сделать подчеркнутый пунктиром (пунктирной линией) текст?

-------
Мысли-читатель сломался, может подробней расскажите?
А где исходный код? Или мы стихи обсуждаем?! )) Настройки темы > Решено ?

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

Располагаться ниже базовой линии строки;
Не соприкасаться непосредственно с частями букв, выступающими ниже базовой линии;
Должна быть возможность изменять цвет, толщину и стиль линии подчеркивания;
Подчеркивание должно продолжаться после переноса текста;
Подчеркивание должно работать на любом фоне.

Все это довольно очевидно. Но, насколько я знаю, не существует способа добиться всего этого с помощью CSS .

Подходы

Способы, с помощью которых можно подчеркнуть текст в интернете:

text-decoration ;
border-bottom ;
box-shadow ;
background-image ;
Фильтры SVG ;
Underline.js (canvas) ;
text-decoration-* .

Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.

text-decoration

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

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

Его просто применять;
Располагается ниже базовой линии;
По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии ( в Safari и iOS );
Переносится по строкам;
Подходит для любого фона;

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

border-bottom

border-bottom — отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS .

Результат применения border-bottom к строчным элементам:

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

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

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

С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
Переносится по умолчанию, если это не inline-block ;
Работает на любом фоне, если не используется text-shadow .

Размещается далеко от текста, это положение трудно изменить;
Нужно использовать много дополнительных свойств;
Странное выделение текста при использовании свойства text-shadow .

box-shadow

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

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

Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
С помощью text-shadow можно задать отступы ниже базовой линии;
Можно изменить цвет и толщину линии подчеркивания;
Подчеркивание переносится построчно.

Невозможно изменить стиль;
Не работает для любого фона.

background-image

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

Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.

Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
С помощью text-shadow можно задать отступы ниже базовой линии;
Можно изменять цвет, толщину и стиль подчеркивания;
Работает с пользовательскими изображениями;
Подчеркивание переносится построчно;
Работает на любом фоне, если не используется text-shadow .

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

Фильтры SVG

Можно создать SVG элемент filter , который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS :

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

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

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

Может быть размещено ниже базовой линии;
Можно задать отступы ниже базовой линии;
Можно изменять цвет, толщину и стиль линии подчеркивания;
Работает на любом фоне.

Подчеркивание не переносится на несколько строк;
Не работает в IE , Edge или Safari , но можно создать резервный вариант с помощью text-decoration . В Safari оно будет выглядеть хорошо в любом случае.

Underline.js (canvas)

Underline.js рисует CSS подчеркивание с помощью элементов . Это новый подход, который работает на удивление хорошо.

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

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

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

Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:

text-decoration-color ;
text-decoration-skip ;
text-decoration-style .

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

TEXT-DECORATION-COLOR

Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari . Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.

TEXT-DECORATION-SKIP

Это свойство добавляет разрывы ниже базовой линии:

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

TEXT-DECORATION-STYLE

Данное свойство предлагает те же типы подчеркивания текста CSS , которые можно задать с помощью border-style . И кроме этого добавляет тип линии wavy ( волнистая ).

Ниже приводятся различные значения, которые можно использовать:

dashed ;
dotted ;
double ;
solid ;
wavy .

На данный момент text-decoration-style работает только в Firefox , вот скриншот:

Выглядит знакомо, не правда ли?

В чем недостатки?

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

После небольшого исследования я нашел эти два свойства:

text-underline-width ;
text-underline-position .

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

Вывод

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

Для большего текста стоит использовать подход фонового изображения. Он работает. Кроме этого, существуют примеси Sass , которые можно использовать вместе с ним. Можно одновременно не использовать text-shadow, если линия подчеркивания достаточно тонкая или отличается от текста по цвету.

Для одиночных строк текста используйте border-bottom и любые другие свойства.

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

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

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

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

ссылки без подчёркивания;
декоративное подчёркивание;
выделение фоновым цветом;
рамки;
рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

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

Рассмотрим два способа подчеркивания.

Способ №1: свойство text-decoration

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

Нас интересует простое подчеркивание, которое задаётся добавлением в css-файл следующего кода:

Добавим в html-файл следующий код:

Посмотрите результат, попробуйте внести изменения при переходе в песочницу:

Способ №2: использование свойства border-bottom

Теперь давайте сделаем наоборот: по умолчанию ссылка подчёркнута, а при наведении курсора мыши — пропадает.

Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента, что добавляет сразу несколько преимуществ.

Код HTML-файла:

Добавим в CSS-файл следующий код:

Код для оформления (стиль body) добавляю в песочнице, а здесь оставила лишь тот, что касается ссылок.

Смотрим результат в песочнице:

Старайтесь не копировать весь код, а писать его самостоятельно, так вы оттачиваете до автоматизма свои навыки.

Читайте также: