Подчеркивание для блочных элементов вроде тега

можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

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

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Пример текста

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору H1 . Результат данного примера показан на рис. 1.

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Пример текста

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

Результат данного примера показан на рис. 2.

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

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

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

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

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

Цели

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

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

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

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

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

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

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

Подходы

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

text-decoration;

background-image;

SVG фильтры;

Underline.js (canvas);

text-decoration-*

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

Свойство text-decoration

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

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

Плюсы

просто использовать;

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

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

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

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

Минусы

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

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

Свойство border-bottom

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

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

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

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

Плюсы

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

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

Минусы

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

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

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

Свойство box-shadow

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

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

Плюсы

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

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

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

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

Минусы

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

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

Свойство background-image

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

Демо ниже не использует 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-skip

text-decoration-style

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

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

text-underline-width

text-underline-position

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

Выводы

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

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

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

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

С появлением CSS3, HTML5 и подключению веб-шрифтов сайты стали динамичными, красивыми и более технологичными в процессе разработки.Многие не любят ссылки подчеркивать и в некоторой степени я их понимаю. Довольно-таки толстые лини хотя и помогают пользователю ориентироваться на сайте и отличать ссылку от обычного текста. Но несколько затрудняют чтение.

С появлением формата RGBA (Red Green Blue Alpha) в CSS3 можно считать данную проблему решенной. Используя расширенный формат представления цвета, у веб-дизайнеров появилась возможность использовать альфа-прозрачность для цвета.

В отличие от свойства opacity его можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока. Цветовые значения RGBA являются продолжением цветовых значений RGB только с альфа-каналом - который определяет непрозрачность объекта.

Синтаксис

color: rgba(0,96,160); / * синий цвет */ color: rgba (0,96,160,0.2 ); / * синий цвет с прозрачностью */

Значение цвета RGBA задается: ​​ RGBA (красный, зеленый, синий, альфа ) .
Параметр альфа представляет собой число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Совместимость

Цветовые значения RGBA поддерживаются браузерами: IE9 +, Firefox 3 +, Chrome, Safari, и Opera 10 +.

Кто внедрил

Данной возможностью сразу же воспользовалась Студия Лебедева, Дизайн-бюро Артёма Горбунова, Илья Бирман… На их сайтах подчеркивание ссылок осталось, но оно стало более изящным.

patpitchaya /

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

Удаление подчеркивания ссылок

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

a { text-decoration: none; }

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

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

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

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

a { text-decoration: none; border-bottom:1px dotted; }

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

a { text-decoration: none; border-bottom:1px dashed; }

Изменение цвета подчеркивания

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

a { text-decoration: none; border-bottom:1px solid red; }

Двойное подчеркивание

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

a { text-decoration: none; border-bottom:3px double; }

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

a { border-bottom:1px double; }

Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

a { text-decoration: none; } a:hover { border-bottom:1px dotted; }

Перевод статьи «How to Change Link Underlines on a Webpage » был подготовлен дружной командой проекта .

Хорошо Плохо