Как сделать подчеркивание при наведении css
Перейти к содержимому

Как сделать подчеркивание при наведении css

  • автор:

Как сделать подчеркивание через CSS

Как сделать подчеркивание ссылок или текста через CSS? Нередко на сайтах используют ссылки без подчеркивания. И только при наведении курсора мыши на ссылку, подчеркивание появляется.

Рассмотрим два способа подчеркивания.

Способ №1: свойство text-decoration

У свойства text-decoration есть разные значения: подчеркивание, перечеркивание, линия над текстом и мигание.

Нас интересует простое подчеркивание, которое задаётся добавлением в css-файл следующего кода:

a < text-decoration: none; /* Убираем подчеркивание у ссылок */ color: #032850; /* Цвет ссылки */ >a:hover < text-decoration: underline; /* Добавляем подчеркивание при наведении курсора мыши на ссылку */ >

Добавим в html-файл следующий код:

    Подчеркиваем ссылки и текст - text-decoration  Наведи на меня курсор – появится подчеркивание  

Посмотрите результат, попробуйте внести изменения при переходе в песочницу:

Способ №2: использование свойства border-bottom

Теперь давайте сделаем наоборот: по умолчанию ссылка подчёркнута, а при наведении курсора мыши — пропадает.

Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента, что добавляет сразу несколько преимуществ.

Код HTML-файла:

    border-bottom  Наведи на меня курсор – подчёркивание пропадёт  

Добавим в CSS-файл следующий код:

a < text-decoration: none; /* Убираем подчеркивание ссылок по умолчанию */ color: #000; /* Цвет ссылки */ border-bottom: 1px solid #000; /* Добавляем подчеркивание сплошной линией черного цвета */ padding-bottom: 5px; /* Добавляем отступ между текстом и линией */ >a:hover < border-bottom: 1px solid rgba(0,0,0,0); /* При наведении делаем подчеркивание прозрачным */ >

Код для оформления (стиль body) добавляю в песочнице, а здесь оставила лишь тот, что касается ссылок.

Смотрим результат в песочнице:

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

Пока на этом всё. Желаю вам успехов в освоении HTML и CSS! ��

Голосов: 3 , Средняя оценка: 5

Эффект плавного подчеркивания ссылок при наведении

Чтобы полоса подчеркивания появлялась с одной стороны, а уходила в другую, при наведении необходимо изменить позиционирование :after , если изначально было left: 0; , то при наведении на ссылку сбрасываем left: auto и назначаем right: 0;

Подробнее в комментариях к стилям

body < font-family: 'Roboto', sans-serif; background: #23202a; position: relative; >.wrapper < min-height: 100vh; /* растягиваем по высоте браузера */ width: 100%; /* растягиваем по ширине браузера */ display: grid; /* для центрирования дочерних ссылок */ place-items: center; /* центрируем дочерние ссылки */ >a.underline < font-size: 6vw; /* размер шрифта относительно ширины браузера */ text-decoration: none; font-weight: bold; font-family: 'Lora', serif; color: #e76f51; position: relative; transition: color 0.8s, text-shadow 0.8s; /* для плавного изменения цвета и тени(свечения) ссылки */ >a.underline:after < content: ''; display: block; position: absolute; /* позиционируем относительно ссылки */ bottom: 15%; background: #2a9d8f; height: 20%; /* высота относительно высоты ссылки */ width: 0%; /* изначально ширина полосы подчеркивания равна 0% */ z-index: -1; /* ставим полосу подчеркивания позади текста ссылки */ transition: width 0.8s, opacity 0.8s, box-shadow 0.8s; /* для плавного изменения ширины, прозрачности, тени(свечения) */ border-radius: 100px; opacity: 0; /* изначально полоса полностью прозрачна */ box-shadow: 0 0 16px rgba(42,157,143,0); >a.underline:hover < color: #f4a261; text-shadow: 0 0 16px rgba(244,162,97,0.64); >/* При наведении на ссылку, псевдоэлемент :after становится непрозрачным и шириной 100% относительно текста ссылки*/ a.underline:hover:after < width: 100%; opacity: 1; box-shadow: 0 0 16px rgba(42,157,143,0.88); >/* Underline A */ /* В первом случае :after позиционируем к правому краю текста ссылки */ a.underline_a:after < right: 0; >/* при наведении позиционируем к левому краю */ a.underline_a:hover:after < right: auto; left: 0; >/* Underline B */ /* В втором случае :after позиционируем к левому краю текста ссылки */ a.underline_b:after < left: 0; >/* при наведении позиционируем к правому краю */ a.underline_b:hover:after < left: auto; right: 0; >/* Underline C */ /* В третьем случае :after центрируем */ a.underline_c:after

В результате получаем

Архив с примером можно скачать по ссылке

Понимая принцип такого эффекта наведения, в дальнейшем, на основе данного примера можно придумывать и применять множество других эффектов

Буду рад, если статья оказалась полезной

Спасибо за ваше внимание и уделённое время!

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

У ссылок есть стандартное подчеркивание, которое нельзя красиво анимировать, чтобы его отключить необходимо воспользоваться свойством text-decoration .

text-decoration: none

Создаем свое подчеркивание

Для создания собственного подчеркивание используем псевдоэлемент и расположим его абсолютно относительно ссылки. Сделаем ему ширину 100%, высоту 1px, добавим цвет на фон и расположим снизу ссылки.

.link < position: relative; >.link::after

Анимируем подчеркивание ссылки

Чтобы анимировать наше подчеркивание, изменим его ширину на 0 и при наведении на ссылку будем увеличивать его до 100%. Плавность анимации делаем с помощью свойства transition .

.link::after < width: 0; transition: 0.3s; >.link:hover:after

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

У нас получилась анимация подчеркивания слева направо. Чтобы сделать анимацию от центра в стороны, необходимо начальное положение псевдоэлемента сделать по центру.

.link::after

Вот примеры различных анимаций подчеркивания:

Подчеркивание многострочной ссылки

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

Для обхода данной проблемы мы воспользуемся свойстовом background и линейным градиентом.

.link

Фоны идеально обтекают текст, даже когда он переносится на новую строку, а благодаря свойствам, таким как background-size и background-position , мы можем с высокой точностью контролировать их вид и поведение.

Для анимации данного способа необходимо при ховере менять background-size :

.link < background-size: 0 1px; transition: 0.3s; >.link:hover

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

Вот например волнистое и пунктирное подчеркивание:

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

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

В это статье я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек.

Предположим, у вас есть ссылка:

По умолчанию, это обычная ссылка, стили для которой задает браузер. Давайте это исправим.

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

Добавим вот такие стили:

a < position: relative; color: #484848; font-size: 1.25rem; text-decoration: none; >a::before

У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.

Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.

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

a:hover:before

Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.

a::before

Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.

Итак, итоговый код выглядит следующим образом:

Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!

У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *