Подчеркнутый html. Подчеркивание в html: способы

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное , они просто хотят создать красивую линию под текстом.

Это самое простое подчеркивание, но у него правильный размер и оно не перекрывает выносные элементы букв . И оно однозначно лучше дефолтного подчеркивания в большинстве браузеров. Medium пришлось столкнуться со сложностями для достижения своего стиля в вебе. Два года спустя, нам все также сложно сделать красивое подчеркивание.

Цели

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

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

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

• позиционируется слишком низко и перемещается сложным способом;
• используется много дополнительных свойств для правильной работы;
• при использовании text-shadow выделение текста выглядит уродливо.

box-shadow

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

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

• позволяет изменять цвет и толщину линии;
• работает с многострочным текстом.

• не позволяет изменять стиль подчеркивания;
• работает не на любом фоне.

background-image

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline; .

Следующий вариант обходится без linear-gradient , для эффектов вы можете добавить свое фоновое изображение.

• может позиционироваться ниже базовой линии;
• может пропускать выносные элементы за счет text-shadow ;
• работает с кастомными изображениями;
• обертывает несколько строчек текста;
• работает на любом фоне, если не применять text-shadow .

• размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.

Фильтры SVG

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

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

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

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

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

• не работает с многострочным текстом;
• не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.

Underline.js (Canvas)

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает , но я опишу кратко: подчеркивание рисуется с помощью элементов . Это новый подход, который работает на удивление хорошо.

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

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

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration . Время пришло.

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

• text-decoration-color
• text-decoration-skip
• text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах - как всегда. Такие дела.

text-decoration-color

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

text-decoration-skip

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

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

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

text-decoration-style

Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style , добавляя кроме этого стиль wavy .

Вот список доступных значений:

• dashed
• dotted
• double
• solid

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Чего не хватает

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

После небольшого исследования, я нашел еще пару свойств:

• text-underline-width
• text-underline-position

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Выводы

Так какой же способ подчеркивания лучший?

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

Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass . Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.

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

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

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

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck , в которой рассматриваются те же вопросы.

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

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

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

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

a:hover { text-decoration: underline; }

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

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

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

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

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

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

Пример 1. Отсутствие подчёркивания у ссылок

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .

Подчёркивание ссылок при наведении на них курсора мыши

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

Пример 2. Подчёркивание ссылок

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

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

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background , присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover , тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

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

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

Пример 6. Изменение цвета рамки у ссылок

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

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

A { border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */ } a:hover { border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ }

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a {...} , как показано в примере 7.

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега "а" (anchor). Современные браузеры по умолчанию отображают подобный элемент с Зачастую верстальщики или веб-дизайнеры предпочитают либо изменять этот стиль, либо удалять его вообще.

В некоторых случаях это действительно необходимо. К примеру, в плотном ссылочном блоке, где лишнее оформление будет только перегружать восприятие, и затруднять чтение документа. Однако в некоторых случаях целесообразно сохранять разграничение текста и ссылок. Если дизайн сайта полностью исключает подобное форматирование, то стоит применить любой другой вид выделения таких элементов. Самым распространенным видом разграничения сегодня является цветовой контраст анкоров в тексте. Это эффективно. Единственным небольшим минусом такого варианта станет проблема выделения текста людьми, которые не могут воспринимать различные цвета (дальтонизм). Но это настолько низкий процент пользователей, что им можно пренебречь.

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

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

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

text-decoration: none;

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

Но что делать, если у вас нет доступа к файлу CSS?

В таком случае целесообразным является применения тега Style в начале документа. Работает так же, как и файл CSS. Для того чтобы применить стили, необходимо в самом начале документа (или HTML страницы) дописать конструкцию, в которой действуют обычные правила CSS стилей.

Эти стили применяются только к определенной странице. В других разделах или документах сайта они действовать не будут.

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

Но как быть, если необходимо убрать подчеркивание ссылки при наведении? CSS и в этом случае сможет нам помочь. Код будет выглядеть так:

text-decoration: none;

Именно псевдокласс « :hover » отвечает за декорацию элементов при наведении курсора.

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

text-decoration: none;

text-decoration: underline;

Применение идентификаторов и классов

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

Есть несколько вариантов решения этой проблемы.

Убрать подчеркивание ссылок можно инлайново. Хотя это категорически не рекомендуется делать с точки зрения оптимизации работы сайта.

Для этого необходимо непосредственно в теге ссылки указать параметр Style:

Второй вариант является более приемлемым.

Вводим в элемент дополнительный класс или id и уже этим селекторам присваиваем нужные нам стили:

Класс прописывается с точкой перед его названием:

None_ decoration{

text-decoration: none;

Идентификатор обозначается знаком #:

#none_ decoration{

text-decoration: none;

Данное правило применимо как к файлу CSS, так и к тегу Style

Изменение стиля отображения ссылки в тексте

Сделать это тоже достаточно просто:

color:*указать нужный цвет в любом формате (*red, #c2c2c2, rgb (132, 33, 65)*)* ;

Применяется подобная стилизация по тем же правилам, что описаны для отмены подчеркивания ссылки. CSS-правила в данном случае идентичны. Изменение цвета ссылки и отмена подчеркивания могут быть применены как отдельная стилизация (тогда ссылка останется подчеркнутой, но изменит цвет со стандартного синего на необходимый вам).

Замена стандартной стилизации

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

text-decoration-style:

• Если нужна сплошная линия, указываем значение solid.
• Для волнистой линии - wavy.
• Двойная линия - соответственно double.
• Линию можно заменить на последовательность точек - dotted.
• Подчеркнуть слово в виде пунктира - dashed

А также можно изменить положение линии относительно текста:

Конструкция line-text-decoration-line может принимать значения:

И цвет (не путать с цветом текста!):

text-decoration-line: (любой цвет в любом формате *red, #c2c2c2, rgb (132, 33, 65)* ).

Для удобства все три позиции можно писать вместе в конструкции:

text-decoration: red, line-through, wavy.

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

Детально распишу только код CSS, так как на стороне Html менять и добавлять что-либо нет необходимости.

CSS

Во-первых, с помощью свойства line-height: установим межстрочный интервал в зависимости от базовой линии шрифта, у вас значение может быть другим. Сделаем ссылку блочно-строчной, встроенной в структуру текста, задав ей свойство display со значением inline-block . Избавимся от стандартного подчёркивания прописав text-decoration:none; и зальём ссылку нужным нам цветом.

a { line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; }

Затем используем псевдоэлемент:after , чтобы у нас появилась возможность добавить дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition: . Ширину линии изначально выставим с нулевым значением width: 0%; , высоту определим в 2px . Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.

a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out; }

Остаётся дело за малым, добавить нашей ссылке немного движухи. Для этого используем парочку псевдоклассов:hover и:focus . Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке «плотно» установится курсор. Здесь мы изменим значение ширины, определим его в 100%.
Теперь, при наведении или фокусе на ссылке, стилизованная линия подчеркивания явит себя взору пользователя, плавно с еле-заметной задержкой, время которой, мы предусмотрительно определили ранее в свойстве transition: .

a:hover:after, a:focus:after { width: 100%; }

В итоге мы получаем следующую картину:

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

a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

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

Обновление и дополнения от 22.10.2017

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

Всё довольно просто, необходимо лишь добавить пару-тройку новых свойств, то есть, для основного элемента a определить позиционирование относительным position:relative; , а для псевдоэлемента a:after абсолютным position:absolute; с расстоянием от левого края родительского элемента left:50%; , а так же с помощью свойства transform определить сдвиг элемента по горизонтали на указанное значение transform:translateX(-50%) .

На выходе мы получаем вот такой результат:

В сборе весь код css, для плавного подчёркивания ссылки с центра, должен выглядеть примерно так:

a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); } a:hover:after, a:focus:after { width: 100%; }

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

С Уважением, Андрей