Как сделать подчеркивание при наведении css
Анимация подчёркивания ссылок на чистом CSS
Одно из преимуществ создания моего личного сайта с нуля вместо использования готовой темы заключается в том, что я начинаю с настроек браузера по умолчанию и постепенно добавляю собственные расцветки. Я стараюсь удержать сайт от раздувания, но и персонализация — важное дело. Нужно найти некий компромисс между спартанскими страницами Hacker News и Craigslist с одной стороны и перегруженностью старого MySpace с другой.
Как-то мне попался сайт с причудливыми анимированными подчёркиваниями для ссылок, и я захотел реализовать эффект. Но мне важно использовать чистый CSS, потому что ради таких легкомысленных вещей негоже добавлять JavaScript, который может вызвать проблемы с производительностью или удобством интерфейса (см. угон полосы прокрутки).
Вот как сейчас выглядит эффект:
Реализация
Отрисовка линий под текстом — на удивление сложная тема. Всё зависимт от того, насколько далеко вы готовы отклониться от стандарта и о каких деталях беспокоитесь (например, проход мимо выносных элементов букв).
Я исследовал два подхода. Оба они, по сути, удаляют стандартный text-decoration и с помощью псевдоэлементов добавляют имитированную границу. Затем эта граница анимируется переходами CSS. К сожалению, у этих решений один недостаток: они нормально не работают, если ссылка охватывает более одной строки. Подчёркивание появляется только в первой строке.
В конце концов я нашёл CodePen от Shaw, лишённый этого недостатка, и изменил эффект на свой вкус.
Вот соответствующий код. Поиграться с ним можно на repl.it.
Рассмотрим подробнее это решение.
Нам придётся использовать фоновое изображение, потому что оно способно покрыть несколько строк. Хотя можно взять реальную картинку, но речь идёт всего лишь о линии, поэтому используем линейный градиент, который сгенерирует нам изображение. Обычно его используют для создания градиента между двумя разными цветами, но нам нужно, чтобы подчёркивание было того же цвета, что и ссылка, поэтому используем currentColor как для начала, так и для конца градиента. currentColor указывает браузеру использовать цвет элемента из свойства color.
Используем background-position для размещения изображения в левом нижнем углу. Значение 0% соответствует горизонтальному положению, а 100% — вертикальному.
Отключаем background-repeat, чтобы предотвратить создание нескольких экземпляров изображения.
С помощью background-size указываем нулевую ширину и высоту в два пикселя. Нулевая ширина означает, что подчёркивание появится только при наведении, иначе картинка не видна.
Устанавливаем transition по размеру фона, так что любое изменение свойства займет 0.3 секунды.
Вот и всё! Я очень доволен лаконичностью кода. Если хотите добавить на свой сайт что-то похожее, не стесняйтесь брать эту реализацию или посмотрите некоторые другие анимированные эффекты подчёркивания.
Плавное подчёркивание ссылки при наведении на чистом CSS
Представляю коротенькие фрагменты кода(сниппет) CSS, для реализации выделения анкоров ссылок с плавным подчёркиванием при наведении.
Зачем нужно выделять ссылки из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера.
С помощью псевдо-класса :hover и магии CSS3, можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект.
Решения, о которых пойдёт речь сегодня, не представляют из себя, что-нибудь особо потрясающее или необычное. Всё по-простому, без особых наворотов, только лишь выделение ссылки цветом и лёгкая анимация линии подчёркивания.
Детально распишу только код CSS, так как на стороне Html менять и добавлять что-либо нет необходимости.
В итоге мы получаем следующую картину:
Весь код в сборе будет выглядеть так:
Конечно, это всего лишь один из самых простеньких и скромных вариантов оформления ссылок. Больше экспериментируйте, добавляйте красок, используйте анимацию, сдвигайте вправо или влево, делайте ссылки перевёртыши например, и т.д и т.п, главное не переусердствовать, всё должно быть с чувством, толком, и расстановкой.
Обновление и дополнения от 22.10.2017
В комментариях проскакивали вопросы о том, как сделать подчёркивание с центра текста ссылки, с плавным растягиванием в стороны. Если есть спрос, значит будет и предложение ))).
На выходе мы получаем вот такой результат:
В сборе весь код css, для плавного подчёркивания ссылки с центра, должен выглядеть примерно так:
На сегодняшний день, учитывая то, что все современные браузеры всё более уверенно поддерживают свойства из обоймы CSS3, практически нет никаких ограничений для оригинального оформления ссылок, по-большому счёту, всё зависит от ваших фантазий, да и готовых решений в интернетах предостаточно, при желании отыщется, как говорится — на любой вкус и цвет.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 42
Огромное спасибо за статью. Круто, что реализовано на CSS, ато знал решения только на jQuery. И может слегка нубство… интересует, как сделать подчеркивание с правой стороны, но не могу понять, как это сделать. Спасибо.
Для a:after используйте выравнивание по правому краю float: right;
У меня ссылка занимает две строки, и подчеркивается только нижняя. Как можно это исправить? Спасибо.
Классная возможность декорирования ссылок через CSS. Думаю, такое выделение не просто красиво, но и может привлечь больше внимания, что повысит кликабельность. Это, в свою очередь, может благоприятно сказаться на поведенческих факторах и развитие сайта.
Очень красиво смотрится.
Добрый вечер. Подскажите пожалуйста, как поменять цвет подчеркивания. Не могу найти, какой элемент отвечает за подчеркивание в моем случае hellers.ru/home-modern/
Спасибо, но напишите пожалуйста для особо «одаренной», полностью код. Не могу это обнаружить. Мозг взрывается уже!
Благодарю. Все получилось! Я теперь ваш подписчик 🙂
Очень рад, что у вас всё получилось )))
Очень полезные статьи на вашем сайте. Уже много раз выручали.
Благодарю вас;)
Здравствуйте, подскажите как применить плавное подчеркивание исключительно к тексту, чтоб кнопки не анимировались?
Заранее спасибо)
Спасибо большое за статью. Очень красиво вышло.
Здравствуйте, видел ролик с таким же содержанием, но его заблокировали, нашел эту статью, очень помогло, но я забыл как сделать так, чтобы анимация шла из середины линии в обе стороны, можете подсказать? Спасибо!
Здравствуйте, как сделать так чтобы полоска появлялась по середине и растягивалась в стороны =)
Помогите пожалуйста.
Буду очень благодарен.
Здравствуйте, Илья.
Всё довольно просто, примерно так: см.пример
У меня такой вопрос. После плавного подчеркивания, можно ли сделать так же плавное исчезновение?
Интересный и простой эффект, спасибо Вот только не нравится, что линия распространилась на все ссылки, не только в тексте. Особенно в Меню она лишняя. Как бы ее убрать? )
Здравствуйте.
Конечно можно, есть у меня заготовка, посмотрите как один из вариантов: Тынц
Толщина рамки и её цвет легко настраиваются, направление анимации правда не совсем то что вам нужно, но думаю принцип будет понятен и вы сумеете разобраться
Вдогонку, на скорую руку, подготовил для вас ещё один вариант, думаю, это будет то что надо: Тынц
Отступы, толщину и цвет рамки отрегулируете на своё усмотрение.
Здравствуйте. Сразу хочу извиниться, я вообще почти не в теме css, но очень хочется разобраться. Куда вставляется данный код, как связывается с конкретной ссылкой? Буду благодарен за ответ, возможно порекомендуете что почитать для полного понимания.
Спасибо, классный код!
Зачет! То что нужно. Спасибо за труд.
В общем, ещё раз зашел поблагодарить автора, всё настроил у себя, как хотел. Метод рабочий. Блог в закладках!
Спасибо за отзыв. Рад, что вам пригодилось.
Да, очень круто! Спасибо)
Супер, огромное спасибо.
Вопрос такой, если надо добавить content > к a:after например, как сделать чтобы они работали вместе
Ссылки в CSS
На этой странице вы найдете примеры по изменению HTML-ссылок при помощи CSS, который позволяет их делать ссылками-блоками, ссылками-иконками, без подчеркивания, с закругленными углами, изменять между ними расстояние и многое другое. В дальнейшем на основе этих примеров можно создавать различные варианты навигационных меню для сайта.
Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS :hover, который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.
Ссылки без подчеркивания и с подчеркиванием
В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.
Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок
Описание примера
Изменение стиля подчеркивания ссылок и расстояния от подчеркивания до текста
Изначально подчеркивание у ссылок — это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.
Пример HTML и CSS: пунктирное подчеркивание ссылок
Описание примера
Ссылки-блоки
Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.
Пример HTML и CSS: делаем ссылки-блоки
Описание примера
Ссылки с рамками под курсором мыши
В этом примере мы сделаем ссылки с рамками, которые будут у них появляться в момент наведения курсора мыши. В общем-то, в этом нет ничего сложного, но есть один маленький нюанс.
Пример HTML и CSS: делаем ссылки с рамками при наведении курсора мыши
Описание примера
Вместо того чтобы делать цвет рамок под фон страницы, ему можно было бы присвоить значение transparent и сделать прозрачным, но, как я уже говорил, IE6 неправильно его обрабатывает.
Трехмерные ссылки
В этом примере мы сделаем трехмерные ссылки, которые будут походить на кнопки. Точнее ссылки будут не трехмерные, а псевдотрехмерные, конечно.
Пример HTML и CSS: создание трехмерных ссылок
Описание примера
Ссылки с иконками
В этом примере мы сделаем ссылки с иконками, которые будут содержать не только изображения этих иконок, но и текст под ними. Однако в дальнейшем вы легко сможете их изменить и оставить, например, только иконки.
Перед началом работ подготовим несколько изображений иконок, причем в двух комплектах — для обычных ссылок и ссылок под курсором мыши. Второй комплект должен внешне отличаться от первого, у нас оно выражается в цветовой палитре.
Пример HTML и CSS: делаем ссылки с иконками
Описание примера
IE6 придется немного «пролечить»:
Если вам нужны ссылки вообще без текста, а только с иконками, то можно поступить так. Убрать у ссылок все внутренние отступы и минимальную ширину. Задать им явную ширину и высоту равную размеру иконок.
Закругленные углы ссылок
В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.
Для этого сначала вырежем несколько заготовок картинок в двух комплектах — для обычных ссылок и ссылок под курсором. У нас оно будут отличаться наличием/отсутствием тени у изображений.
Пример HTML и CSS: ссылки с закругленными углами
Описание примера
Останавливаться на самой технологии закругления не будем, если необходимо, то прочитаете о ней в соответствующем разделе сайта.
Для IE6 и IE7 подключаем дополнительные стили с помощью условных комментариев, но сам CSS-код немного изменяем и делаем его отличным от того, который используется в способах закругления углов:
Закругленные углы ссылок (вариант два)
Рассмотрим еще один пример закругления углов ссылок, но уже с использованием четырех отдельных изображений-уголков.
Пример HTML и CSS: ссылки с закругленными углами (второй вариант)
Описание примера
Здесь тоже не будем говорить о самом закруглении, обозначим только отличительные моменты.