Как сделать такой же красивый border?

Question

[karpos]

На сайте https://alpinizzm.ru есть border в меню когда наводишь это голый css или там есть js или jquery и самое главное у меня почему бордер залазит на соседнее меню. Может кто что подскажет?

Answer 1

[Dies Irae]

CSS!

Answer 2

[Bondi]

имеется ввиду бордер у блоков меня "Туризм" "Соревнования" "Соревнования" ? если да, что это делается через псевдоэлемент ::after. Прописываешь для него стили и по дефолту opacity: 0; , при наведении на ссылку opacity: 1; и не забудь добавить свойство transition: opacity .3s ease;

Answer 3

[Павел]

Никакой магии, добавляется просто псевдоэлемент по ховеру и класс js-om. При наведении добавляем класс hover для li, и после действует css

.menu > li > a, .menu > li > a:after {-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
.menu > li > a:after {
    content: "";
    height: 4px;
    background: #000;
    width: 100%;
    position: absolute;
    left: 0;
    top: -4px;
    z-index: 203;
    opacity: 0;
    filter: alpha(opacity=0);
}
.menu > li.hover > a:after {
    opacity: 1;
    filter: alpha(opacity=100);
}

Answer 4

[Shadowman69]

Попробуйте сделать так: элементы меню (то есть li) сделайте инлайн-блочными, а бордер можно сделать друмя вариантами:
- при ховере появляется бордер, которые спозиционирован relative и имеет top: 3px;
- при ховере появляется бордер, через элемент ::after {width: 100%; content: ' '; display: block; background-color: your_color;