В css подчеркивание

Как увеличить разрыв между текстом и подчеркиванием в CSS

Вступление в детали визуального стиля text-decoration:underline в значительной степени бесполезно, поэтому вам придется идти с каким-то взломом, удаляет text-decoration:underline и заменяет его чем-то другим, далекая будущая версия CSS дает нам больше контроля.

Это сработало для меня:

a { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) 81%, #222222 81.1%, #222222 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) ); text-decoration: none; }

• Откорректируйте значения% (81% и 85%), чтобы изменить, как далеко строка от текста
• Отрегулируйте разницу между двумя значениями%, чтобы изменить толщину линии
• отрегулируйте значения цвета (# 222222), чтобы изменить цвет подчеркивания
• работает с несколькими линейными элементами
• работает с любым фоном

Здесь версия со всеми проприетарными свойствами для некоторой обратной совместимости:

a { /* This code generated from: http://colorzilla.com/gradient-editor/ */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */ text-decoration: none; }

Обновление: версия SASSY

Я сделал scss mixin для этого. Если вы не используете SASS, обычная версия выше по-прежнему отлично работает...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) $top, $color $top + 0.1%, $color $bottom, rgba(0,0,0,0) $bottom + 0.1%, rgba(0,0,0,0) ); text-decoration: none; }

затем используйте его так:

$blue = #0054a6; a { color: $blue; @include fake-underline(lighten($blue,20%)); } a.thick { color: $blue; @include fake-underline(lighten($blue,40%), 86%, 99%); }

Обновление 2: Совет опускания

Если у вас сплошной цвет фона, попробуйте добавить тонкий text-stroke или text-shadow в том же цвете, что и ваш фон, чтобы сделать descenders приятным.

Кредит

Это упрощенная версия метода, который я изначально нашел в https://eager.io/app/smartunderline, но с тех пор статья была снята.

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

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

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

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

Подходы

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

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

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

text-decoration

text-decoration — это самый простой способ 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:

filter: url(‘#svg-underline’).

Преимущество этого подхода заключается в том, что фильтр добавляет прозрачность, не используя 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 поместит подчеркивание поверх текста.

Firefox:

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-*.

Перевод статьи «Styling Underlines on the Web» был подготовлен дружной командой проекта Сайтостроение от А до Я.

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

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

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

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

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

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

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

Узнать подробнее

Цели

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

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

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

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

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

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

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

Подходы

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

text-decoration;

border-bottom;

box-shadow;

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.

Плюсы

можно пропускать нижние выноски с помощью 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-skip

text-decoration-style

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

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

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

Safari:

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

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

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

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

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

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

dashed

dotted

double

solid

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-*.

Автор: John Jameson

Источник: «https://css-tricks.com/

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

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

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

Узнать подробнее

Ещё раз про тонкое подчёркивание ссылок на CSS в 2018

6 March 2018, 00:20 MSK

Проблема подчёркивания ссылок в вебе стоит очень давно. Лично я согласен с Ководством Лебедева в том, что ссылки всегда должны быть подчёркнуты.

К сожалению, самый очевидный способ подчеркнуть ссылку — CSS-свойство text-decoration: underline; — имеет массу недостатков. Более-менее красиво такие ссылки будут выглядеть только у пользователей мака или айоса, причём, в любом браузере (спасибо, Эппл). Покажу на примере своего блога.

Внешний вид стандартных ссылок в ИЕ:

Это, конечно, никуда не годится. Линия очень жирная. Внешний вид стандартных ссылок на маке:

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

Не менее очевидный способ подчеркнуть ссылку — воспользоваться CSS-свойством border-bottom: 1px solid #000;. Тут и толщину линии задать можно, и цвет поменять. Именно этот метод используют Студия Лебедева, Илья Бирман и ещё пол-интернета. К сожалению, такие ссылки тоже выглядят некрасиво, особенно, если размер шрифта крупный. Свойство border-bottom задаёт нижнюю границу элемента, поэтому такое «подчёркивание» располагается слишком низко. Пример:

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

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

Во-первых, линия очень тонкая. Во-вторых, она другого цвета. В-третьих, она разрывается вокруг буквы «у». В-четвёртых, работает во всех браузерах (об этом ниже).

Как это сделать на CSS? Сначала убираем стандартное подчёркивание:

a {     text-decoration: none; }

Далее добавляем градиент, который будет задан по оси Y снизу вверх. Схема градиента следующая: прозрачный фон, 1 пиксель цвета, прозрачный фон. Получается так:

a {     text-decoration: none;     background-image: linear-gradient(to top, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px); }

Объясняю, что здесь за магия происходит. to top задаёт направление градиента (снизу вверх), rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px задаёт прозрачный цвет на позиции 0 пк, #555 1px задаёт линию толщиной в 1 пк тёмно-серого (#555) цвета, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 60px задаёт прозрачный цвет со 2-ого пикселя и далее (здесь до 100-ого, но это опционально). Таким образом, линию можно подвинуть на любое количество пикселей с нижнего края ссылки, а также задать любой цвет.

Лайфхак: если линии насыщенного цвета (например, чёрной) установить более тусклый цвет (например, тёмно-серый), линия будет казаться тоньше при одинаковой физической толщине в 1 пк.

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

a {     text-decoration: none;     background-image: linear-gradient(to top, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);     text-shadow: 1px 0px #fff, -1px 0px #fff; }

CSS-свойство text-shadow задаёт тень белого цвета (#fff, потому что у меня фон белый) слева (-1px 0px) и справа (1px 0px) от букв. Поскольку не указана величина размытия, тень будет толщиной в 1 пк.

Теперь про поддержку браузерами. Согласно сайту кэнайюз линейные градиенты поддерживаются всеми фаерфоксами, хромами и операми, ИЕ11+, сафари 7+, андроидом 4.4+. Чтобы расширить поддержку более допотопными браузерами, воспользуемся префиксами: a {     text-decoration: none;     background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);     background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);     background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);     background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);     background-image: linear-gradient(to top, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);     text-shadow: 1px 0px #fff, -1px 0px #fff; }

Здесь важно помнить, что у свойства linear-gradient с префиксами направление градиента снизу вверх задаётся не инструкцией to top, а bottom. С префиксами данный метод будет поддерживаться ИЕ10+, сафари 5.1+, андроидом 4+.

Ссылки по теме:

---

Смотрите также

• 
  Как в microsoft word перевернуть лист
• 
  Как изучать php
• 
  Как убрать разрыв разделов в word 2010
• 
  Как в word редактировать рисунок
• 
  Class и id в css
• 
  Как скопировать таблицу в word
• 
  Как перенести таблицу из word в pdf
• 
  Как закрепить линейку в word 2007
• 
  Как защитить документ word от редактирования и копирования
• 
  Как в word сделать таблицу
• 
  Html как сохранить