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

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии • 23

  • @nelomum9978
    @nelomum9978 9 месяцев назад +1

    Кратко, ясно и по делу. Супер!

  • @Itasha123
    @Itasha123 Год назад +2

    до сих пор актуально! Благодарствую, очень помогли)

  • @asmix7328
    @asmix7328 4 года назад +4

    Супер! Спасибо за урок)

  • @littlegrownbeats
    @littlegrownbeats 2 года назад +1

    Просто пушка! Благодарю!)

  • @anonimanonimich1302
    @anonimanonimich1302 3 года назад +4

    Спасибо братан. Очень помог

  • @Alexus1504
    @Alexus1504 3 года назад +2

    Классно!

  • @ОмурбекМаданов-х7з
    @ОмурбекМаданов-х7з 2 года назад

    Спасибо большое, очень помогли )

  • @canarian
    @canarian 3 года назад

    Спасибо за подсказку )

  • @HINIKS
    @HINIKS 3 года назад

    лучший! спасибо

  • @alexbremen5897
    @alexbremen5897 3 года назад

    круто, то что нужно. а можно уменьшить скорость линии обратно, когда пользователь убрал курсор?

    • @webgolovolomki
      @webgolovolomki  3 года назад +2

      да, конечно. Для .menu_link:before задайте transition: transform 1.5s;

  • @alexdjeims8460
    @alexdjeims8460 2 года назад

    Из-за чего не получается подключить стили? Ситуация такая, создаю папку на рабочем столе в ней создаю два текстовых документа один с расширением html, второй как у вас style.css пишу в коде первого название второго как показывают в обучающих видео на ютуб, а стиль из него не работает.Открываю с помощью chrome. И со ссылкой на локальный документ почему то, переход не получается, хотя документы хранятся в одной папке. Код сразу показывается в браузере как он написан в блокноте. На объекты в сети ссылки сразу работают и переход получается.

  • @Nickola_United
    @Nickola_United Год назад

    Это классно, но ваш способ перестаёт работать, если ссылка расположена на нескольких строках

  • @maxlayne4853
    @maxlayne4853 3 года назад

    а какой редактор кода вы используете в видео?

    • @xnvx8424
      @xnvx8424 3 года назад +2

      Скорее всего Sublime Text

  • @inkspac3
    @inkspac3 3 года назад

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

    • @webgolovolomki
      @webgolovolomki  3 года назад

      Скорее всего вы плавность (transition) задали состоянию :hover, а не вашему классу со всеми свойствами.

    • @inkspac3
      @inkspac3 3 года назад +1

      @@webgolovolomki да, таки есть, спасибо!

  • @appo7481
    @appo7481 3 года назад

    Здравствуйте! Спасибо за урок. Подскажите, пожалуйста, как реализовать возможность фиксации подчеркивания при выборе элемента?
    Я пытался это сделать при помощи:
    .menu_link:hover:after,
    .menu_link:focus:after {
    width: 100%;
    }
    но, к сожалению, фиксации нет.

    • @webgolovolomki
      @webgolovolomki  3 года назад

      Скиньте ссылку на код в песочнице (codepen.io/pen/ или jsfiddle.net/)

    • @appo7481
      @appo7481 3 года назад

      @@webgolovolomki я делал это в вашем образце, по ссылке к описанию видео.

    • @webgolovolomki
      @webgolovolomki  3 года назад +2

      @@appo7481 Если речь про focus (переключение по ссылкам через tab на клавиатуре), то попробуйте вот этот код: .menu_link:focus:before {
      transform: scaleX(1);
      }

    • @appo7481
      @appo7481 3 года назад +2

      @@webgolovolomki Спасибо!