Подчеркивание для ссылки css

Оформление ссылок

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

Убираем подчёркивание

Подчёркивание текста управляется свойством text-decoration; чтобы убрать подчёркивание укажите значение none (пример 1).

Пример 1. Использование text-decoration

Здесь ссылки отображаются без своего традиционного подчёркивания.

Добавляем подчёркивание

Подчёркивание, наоборот, можно добавить при наведении на ссылку курсора мыши. Для этого сперва убираем подчёркивание через свойство text-decoration со значением none , затем в псевдоклассе :hover используем это же свойство, но уже со значением underline . В примере 2 также показано применение свойства text-decoration-color, оно меняет цвет линии подчёркивания.

Пример 2. Использование text-decoration-color

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

Сама линия под текстом ссылки является не сплошной, а прерывается на нижних «хвостиках» некоторых букв, таких как «у», «д», «щ» и др. Также через text-decoration нельзя задать стиль линии подчёркивания. Всё это легко обходится с помощью свойства border-bottom, которое добавляет линию снизу. У такой линии допустимо менять цвет, толщину и её стиль (пример 3).

Пример 3. Использование border-bottom

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

Рамка вокруг ссылок

Для добавления рамки применяется свойство border со следующими параметрами линиями: толщина, стиль и цвет. Рамка отображается непосредственно вокруг текста, поэтому для создания пространства между текстом и рамкой воспользуемся свойством padding (пример 4).

Пример 4. Использование border

Рамку можно отображать не вокруг ссылки непосредственно, а только при наведении на неё курсора мыши. Для этого свойство border перенесём из селектора a в селектор a:hover . Здесь надо учитывать что border несколько меняет положение текста, поэтому добавление рамки приведёт к «дёрганью» текста. Чтобы этого избежать, для ссылок установим прозрачную рамку, используя transparent в качестве значения цвета (пример 5).

Пример 5. Использование border

Вместо border можно использовать свойство outline (пример 6), оно не смещает содержимое, поэтому использовать прозрачную рамку уже не нужно. При этом для outline не работает скругление углов, они всегда будут прямыми.

Пример 6. Использование outline

Перенос текста ссылки

Рамки вокруг ссылок хорошо смотрятся, когда текст отображается в одну строку. Но если текст ссылки содержит несколько слов, при переносе слов с одной строки на другую возможен «разрыв» рамки (рис. 1).

Рис. 1. Перенос текста ссылки

Есть два основных способа, как устранить этот недостаток:

Запрет переноса текста осуществляется с помощью свойства white-space со значением nowrap . Это свойство добавляется к селектору a , запрещая тем самым переносить текст внутри ссылки на другую строку (пример 7).

Пример 7. Использование white-space

Результат данного примера показан на рис. 2. Видно, что если текст ссылки не помещается на одной строке, то он переносится на другую строку целиком.

Рис. 2. Текст ссылки без переносов

Использование white-space не всегда смотрится уместно, особенно в случае длинного текста. Из-за переноса такой строки в текстовом блоке образуются некрасивые «дыры».

Другой способ связан с использованием свойства box-decoration-break со значением clone . Оно работает следующим образом — каждый фрагмент текста на своей строке воспринимается независимо и к нему отдельно применяются стили. В результате часть текста на каждой строке содержит свою завершённую рамку, как показано на рис. 3.

Рис. 3. Результат применения box-decoration-break

В примере 8 к ссылкам добавляется красная рамка со скруглёнными уголками.

Пример 8. Использование box-decoration-break

Ссылки в виде кнопок

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

Для ссылок-кнопок введём отдельный класс .button , чтобы менять стиль не всех ссылок, а только выбранных. Для этого класса установим цвет фона, текста, шрифт, рамку, поля. У текста также лучше убрать подчёркивание и проделать с ним другие желаемые манипуляции (пример 9).

К такой ссылке применим псевдокласс :hover, который устанавливает стиль при наведении на него курсора мыши. В частности, в примере меняется цвет фона, текста и рамки. Чтобы смена цветов протекала плавно, к .button добавлено свойство transition, задающее продолжительность перехода.

Итоги

• Подчёркивание у ссылок убирается с помощью свойства text-decoration со значением none .
• Цветом подчёркивания можно управлять через свойство text-decoration-color.
• Подчёркивание можно имитировать линией снизу используя свойство border-bottom.
• Рамка добавляется к ссылкам через свойство border или outline, причём у последнего нельзя делать скруглённые уголки.
• Можно запретить перенос текста ссылки на другую строку с помощью свойства white-space со значением nowrap .

Источник

Подчеркивание ссылок и текста через 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:

• solid — сплошная линия;
• double — двойная (из первого примера выше);
• dotted — состоит из последовательности точек;
• dashed — позволяет сделать пунктирное подчеркивание CSS;
• wavy — эффектная волнистая линия.

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 эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:

a:hover { text-decoration: underline; }

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

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

Источник