Наверняка вы замечали на многих ресурсах анимационное подчеркивание ссылок и хотели узнать, как это воплотить на своем сайте. Чтобы сделать красивое css подчеркивание элементов нам не понадобятся большие познания, либо подключение дополнительных скриптов, все, что нам нужно – это стандартный HTML и CSS.

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

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

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

HTML

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

CSS

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

За подчеркивание у нас отвечает свойство text-decoration , но применять его здесь не имеет смысла, потому как воплотить наши планы по анимации в таком случае не совсем актуально. Не будем забывать, что каждому элементу можно присвоить псевдоэлемент::before или::after . Поэтому все свойства будем задавать именно им, а нашей ссылке сразу же задаем следующие параметры:

A{ display: inline-block; position: relative; text-decoration: none; }

Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу::before назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.

A::before{ display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in-out; left: 50%; bottom: 0; }

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом::after:

A::after{ display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; }

A:hover::before{ width: 50%; left: 0; } a:hover::after{ width: 50%; }

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

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

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; }

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: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% ; }

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% ; }

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

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

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

С помощью html тексту можно придать красивое оформление. Очень популярен элемент подчеркивания, но не все постоянные пользователи знают как его применять.

Подчеркивание в HTML

Итак, как же сделать подчеркивание? в html оформляется при помощи тега . Он используется во всех спецификациях html и xhtml, но только при условии переходного , так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.

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

1. Заголовок номер один

Наш текст в абзаце

Слово "текст" при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

1. Заголовок номер два

Наш текст в абзаце

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

Кроме того, прописывание стилей в css делает код более компактным, а это значит, что загрузка страницы будет быстрее.

Чаще всего верстальщики применяют стили, добавляя границы или подчеркивание в html или же вынося их в отдельный css-файл.

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

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

• нужный-класс {
• text-decoration: underline;

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

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

• нужный-класс {
• text-decoration: none;

Затем текст украшается при помощи следующего свойства:

• .нужный-класс {
• text-decoration: none;
• border-bottom: 2px dashed black;

Так выходит декорирование с Чтобы сделать ее сплошной, вместо "dashed" применяется "solid". Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить "dotted".

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

• нужный-класс {
• text-decoration: none;
• border-bottom: 1px dotted blue;
• color: blue;

Так получится синий текст с синим оформлением. Чтобы присоединить стиль к html, нужно в разметку добавить класс.

• Третий заголовок

Наш текст в абзаце

Вот и все, это основы подчеркивания в html.