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

25486

Наверняка вы замечали на многих ресурсах анимационное подчеркивание ссылок и хотели узнать, как это воплотить на своем сайте. Чтобы сделать красивое css подчеркивание элементов нам не понадобятся большие познания, либо подключение дополнительных скриптов, все, что нам нужно – это стандартный HTML и CSS.

Вариации подчеркивания

Подчеркивание ссылок или любых других элементов, можно придумать какое угодно. Подчеркивание может всплывать снизу, выезжать слева или справа и т.д. Мы рассмотрим более интересный пример, в котором подчеркивание будет разъезжаться от центра к краям, как на демонстрации ниже.

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

HTML

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

<a href="#">demo ссылка</a>

CSS

Реализация будет заключаться в двух линиях, которые будут разъезжаться от середины нижней части элемента к его краям.

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

a{
   display: inline-block;
   position: relative;
   text-decoration: none;
}

Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу ::before назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.

a::before{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out, left .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition. Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом ::after:

a::after{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Дальше нам остается только добавить эффект при наведении мышки на ссылку.

a:hover::before{
   width: 50%;
   left: 0;
}
a:hover::after{
   width: 50%;
}

Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента ::before. Подписывайтесь на материалы и предлагайте темы для статей.

11
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(18 голосов, в среднем: 4.7 из 5)
не скупись ;-) оцени статью
Подписка на обновления:
Автор блога Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом Wordpress, либо адаптация сайта, я всегда рад помочь.

связаться

Вместе с этим советую почитать:

Оставьте комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
не пытайтесь оскорбить автора, либо участников блога, ваши комментарии все равно не будут промодерированы!
у меня есть сайт

комментариев: 11
  • Александр

    Здравствуйте! Подскажите, пожалуйста. А можно это подчеркивание оставлять на активной ссылке?

    Ответить
    • Максим Рябухин

      Александр, здравствуйте, можно подробнее?

      Ответить
      • Александр

        Максим Рябухин, допустим сделали подчеркивание меню при наведении с помощью (a::after — как у вас в комментариях при наведение на ваше имя). А как сделать чтобы это подчеркивание оставалось при активной ссылке меню? Непросто появлялось при наведении, но и оставалось когда мы кликаем на какое либо меню.

        Ответить
  • Міша

    А как зделать такоеже подчеркивания как у вашего имени?

    Ответить
  • Олег

    А как сделать такой эффект только с левого бока ( вертиакальную версию)

    Ответить
    • Максим Рябухин

      Олег, в статье есть пример, аналогично можно и вертикальную и прочие вариации придумать.

      Ответить
  • Галина

    Максим, спасибо огромное что так оперативно ответили. В такой праздник я и не надеялась, потом конечно почитала ваши публикации про здоровый образ жизни…Да,нужно все-таки свой граватар сделать и задрать так носик как и вы))) Только у вас есть уже чем гордиться, очень хороший блог!!!

    Ответить
    • Максим Рябухин

      Галина, все мы когда-то с чего-то начинаем и у вас всё получится ;-)

      Ответить
      • Галина

        Максим Рябухин, пасибо за надежду!!! И Вам, всех земных благ и большой удачи!

        Ответить
        • Максим Рябухин

          Галина, спасибо!

          Ответить
      • Nikolay

        Максим Рябухин, а как такое проделать для input-text? Вот мой css: .form-control {
        color: rgba(0, 0, 0, 0.87);
        font-family: ‘Roboto’, sans-serif;
        font-size: 16px;
        height: 40px !important;
        width: 256px;
        border:none;
        box-shadow: none !important;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 0 !important;
        display: inline-block;
        position: relative;
        margin-top: 29px;
        //margin-bottom: 2px;
        //-webkit-transition: border-bottom .3s ease-in-out;
        //transition: border-bottom .3s ease-in-out;
        }
        .form-control::before {
        display: block;
        position: absolute;
        content: «»;
        height: 2px;
        width: 0;
        background-color: #3498db;
        -webkit-transition: width 2s ease-in-out;
        transition: width 2s ease-in-out, left 2s ease-in-out;
        left: 50%;
        bottom: 0;
        }
        .form-control::after {
        display: block;
        position: absolute;
        content: «»;
        height: 2px;
        width: 0;
        background-color: #3498db;
        -webkit-transition: width 2s ease-in-out;
        transition: width 2s ease-in-out;
        left: 50%;
        bottom: 0;
        }
        .form-control:focus::before {
        width: 50%;
        left: 0;
        }

        .form-control:focus::after {
        width: 50%;
        }

        Ответить
показать все