Dobrovoi Master
сделано с душой

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

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

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

Представляю коротенькие фрагменты кода(сниппет) 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 и поделитесь ссылкой на запись в своих соц-сетях:

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

20 комментариев
  1. Oleg:

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

    Ответить
    • driver:

      Здравствуйте.

      Конечно можно, есть у меня заготовка, посмотрите как один из вариантов: Тынц

      Толщина рамки и её цвет легко настраиваются, направление анимации правда не совсем то что вам нужно, но думаю принцип будет понятен и вы сумеете разобраться

      Вдогонку, на скорую руку, подготовил для вас ещё один вариант, думаю, это будет то что надо: Тынц

      Отступы, толщину и цвет рамки отрегулируете на своё усмотрение.

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

Отправляя к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