Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 42

  • Слава: 27 ноября, 2015 в 00:41

    Огромное спасибо за статью. Круто, что реализовано на CSS, ато знал решения только на jQuery. И может слегка нубство… интересует, как сделать подчеркивание с правой стороны, но не могу понять, как это сделать. Спасибо.

    Ответить
    • driver: 27 ноября, 2015 в 09:50

      Для a:after используйте выравнивание по правому краю float: right;

      Ответить
  • Иван: 21 мая, 2016 в 01:21

    У меня ссылка занимает две строки, и подчеркивается только нижняя. Как можно это исправить? Спасибо.

    Ответить
  • Вадим: 28 июля, 2016 в 11:11

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

    Ответить
  • Dimon: 18 октября, 2016 в 05:23

    Очень красиво смотрится.

    Ответить
  • Марина: 2 ноября, 2016 в 23:01

    Добрый вечер. Подскажите пожалуйста, как поменять цвет подчеркивания. Не могу найти, какой элемент отвечает за подчеркивание в моем случае hellers.ru/home-modern/

    Ответить
    • driver: 3 ноября, 2016 в 00:47

      Здравствуйте, Марина.
      В селекторе a:after, свойство background-color: #ffeb3b;, просто меняете hex значение цвета #ffeb3b на своё. Это что касаемо примера в статье. В вашем случае в menu-white.css находите:
      @media screen and (min-width: 1199px)
      #header ul#header-menu>li>a:before
      и работаете со свойством background: #fcd846;

      Ответить
      • Марина: 3 ноября, 2016 в 01:11

        Спасибо, но напишите пожалуйста для особо «одаренной», полностью код. Не могу это обнаружить. Мозг взрывается уже!

        Ответить
  • Марина: 3 ноября, 2016 в 02:26

    Благодарю!!! Все получилось! Я теперь ваш подписчик 🙂

    Ответить
    • driver: 3 ноября, 2016 в 02:28

      Очень рад, что у вас всё получилось )))

      Ответить
  • Елена: 28 ноября, 2016 в 14:47

    Очень полезные статьи на вашем сайте. Уже много раз выручали.
    Благодарю вас;)

    Ответить
  • Денис: 6 февраля, 2017 в 00:11

    Здравствуйте, подскажите как применить плавное подчеркивание исключительно к тексту, чтоб кнопки не анимировались?
    Заранее спасибо)

    Ответить
  • Алексей: 24 августа, 2017 в 11:16

    Спасибо большое за статью. Очень красиво вышло.

    Ответить
  • Temp.: 14 сентября, 2017 в 01:53

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

    Ответить
  • Илья: 22 октября, 2017 в 00:49

    Здравствуйте, как сделать так чтобы полоска появлялась по середине и растягивалась в стороны =)
    Помогите пожалуйста.
    Буду очень благодарен.

    Ответить
    • driver: 22 октября, 2017 в 10:26

      Здравствуйте, Илья.
      Всё довольно просто, примерно так: см.пример

      Ответить
  • Сергей: 15 декабря, 2017 в 04:59

    У меня такой вопрос. После плавного подчеркивания, можно ли сделать так же плавное исчезновение?

    Ответить
  • Ирина: 10 августа, 2018 в 00:07

    Интересный и простой эффект, спасибо Вот только не нравится, что линия распространилась на все ссылки, не только в тексте. Особенно в Меню она лишняя. Как бы ее убрать? )

    Ответить
    • driver: 10 августа, 2018 в 00:53

      Конечно распространится, потому как в моём прмере стили подчёркивания прописаны напрямую для тега <a>, а значит работать будут для всех ссылок. Вы же можете использовать в качестве селектора определённый класс, например .underline
      a.underline {
      здесь свойства
      }

      и так с каждым селектором эффекта;
      затем при написании статьи или в любом другом месте где хотите видеть ссылку с подчёркиванием, просто добавляете нужной ссылке class="underline":
      <a href="###" class="underline">образец</a>
      всё, подчёркивание теперь, будет только у тех ссылок, которые определите вы сами, прописав им
      class="underline"

      Ответить
  • Oleg: 11 ноября, 2018 в 01:16

    А можно реализовать для рамки фотографии , чтобы рамка появлялась по середине и расстягивалась по сторонам ?

    Ответить
    • driver: 11 ноября, 2018 в 02:37

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

      Ответить
  • Алексей: 1 декабря, 2018 в 16:52

    Здравствуйте. Сразу хочу извиниться, я вообще почти не в теме css, но очень хочется разобраться. Куда вставляется данный код, как связывается с конкретной ссылкой? Буду благодарен за ответ, возможно порекомендуете что почитать для полного понимания.

    Ответить
  • Таня: 23 марта, 2019 в 22:21

    Спасибо, классный код!

    Ответить
  • Андрей WPM: 12 апреля, 2019 в 19:07

    Зачет! То что нужно. Спасибо за труд.

    Ответить
    • Андрей WPM: 18 апреля, 2019 в 20:08

      В общем, ещё раз зашел поблагодарить автора, всё настроил у себя, как хотел. Метод рабочий. Блог в закладках!

      Ответить
      • driver: 18 апреля, 2019 в 21:28

        Спасибо за отзыв. Рад, что вам пригодилось.

        Ответить
  • Leo: 5 мая, 2019 в 08:34

    Да, очень круто! Спасибо)

    Ответить
  • Алексей: 8 мая, 2019 в 22:18

    Супер, огромное спасибо.
    Вопрос такой, если надо добавить content > к a:after например, как сделать чтобы они работали вместе

    Ответить
  • Михаил: 12 июля, 2019 в 03:01

    а для чего нужно content:””; ?

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>