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

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

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

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

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

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

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

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

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

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

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

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

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

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

Код HTML-файла:

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

Добавим в 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

Плавное подчеркивание ссылки при наведении на чистом 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). Пробуйте!

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

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

Представляю коротенькие фрагменты кода(сниппет) CSS, для реализации выделения анкоров ссылок с плавным подчёркиванием при наведении.
Зачем нужно выделять ссылки из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера.
С помощью псевдо-класса :hover и магии CSS3, можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект.
Решения, о которых пойдёт речь сегодня, не представляют из себя, что-нибудь особо потрясающее или необычное. Всё по-простому, без особых наворотов, только лишь выделение ссылки цветом и лёгкая анимация линии подчёркивания.

Детально распишу только код 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 Спасибо, но напишите пожалуйста для особо «одаренной», полностью код. Не могу это обнаружить. Мозг взрывается уже! Ответить

driver : 3 ноября, 2016 в 01:55 Ответить
Марина : 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 Интересный и простой эффект, спасибо Вот только не нравится, что линия распространилась на все ссылки, не только в тексте. Особенно в Меню она лишняя. Как бы ее убрать? ) Ответить

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 например, как сделать чтобы они работали вместе Ответить

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

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

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

Наведите курсор на ссылку

a  position: relative; color: #00a650; /*задаём цвет ссылки*/ cursor: pointer; line-height: 1; /*задаём высоту строки*/ text-decoration: none; /*убираем подчёркивание*/ > a:after  display: block; position: absolute; left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */ width: 0;/*задаём длинну линии до наведения курсора*/ height: 2px; /*задаём ширину линии*/ background-color: #00a650; /*задаём цвет линии*/ content: ""; transition: width 0.3s ease-out; /*задаём время анимации*/ > a:hover:after, a:focus:after  width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/ >

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

достаточно изменить left:0 на right:0;

Применяем плавное подчеркивание ссылок при наведении к нашему стандартному шаблону.

Делаем это из административной панели:

1. Открываем настройки
2. Выбираем шаблон
3. Открываем Style.css
4. В самый конец кода добавляем

.bottom-bar .main-menu .mg-menu li .submenu li a  position: relative; color: #00a650; /*задаём цвет ссылки*/ cursor: pointer; line-height: 1; /*задаём высоту строки*/ text-decoration: none; /*убираем подчёркивание*/ > .bottom-bar .main-menu .mg-menu li .submenu li a:after  display: block; position: absolute; left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */ width: 0;/*задаём длинну линии до наведения курсора*/ height: 2px; /*задаём ширину линии*/ background-color: #00a650; /*задаём цвет линии*/ content: ""; transition: width 0.3s ease-out; /*задаём время анимации*/ > .bottom-bar .main-menu .mg-menu li .submenu li a:focus:after, .bottom-bar .main-menu .mg-menu li .submenu li a:hover:after width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/ >

Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы — пишите в комментариях.