Главная » Сниппеты » Плавное подчёркивание ссылки при наведении

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

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

Представляю коротенький фрагмент кода(сниппет) 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 {
    line-height: 1;
    display: inline-block;
    color:#ffeb3b;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #ffeb3b;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}

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

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

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

    Ответить
    • driver:

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

      Ответить
  2. Елена:

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

    Благодарю вас;)

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

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

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

    Ответить
  6. Марина:

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

    Ответить
    • driver:

      Здравствуйте, Марина.

      В селекторе 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;

      Ответить
      • Марина:

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

        Ответить
        • driver:

          В вашей теме есть файл menu-white.css, откройте его в редакторе, найдите

          #header ul#header-menu>li>a:before { content: ''; position: absolute; bottom: -7px; left: 0; width: 100%; height: 2px; background: #fcd846; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .1s; transition: transform 0.1s }

          цвет линии настраиваете в свойстве background выбрав нужное вам значение hex сейчас у вас #fcd846, что соответствует жёлтому оттенку.

          Извините, но как ещё более подробнее вам объяснить, увы не вкуриваю совсем)))

  7. Марина:

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru