0

Как реализовать такие горизонтальные линии при наведении на ссылку меню на css?

Пример:

введите сюда описание изображения

1
  • 1
    Это border вокруг элемента который вешается на определенный класс, а через js вы присваиваете данный класс, например active по нажатию на другой пункт меню 18 окт 2018 в 6:52

2 ответа 2

3

a {
  display: inline-block;
  position: relative;
  padding: 13px;
  text-transform: uppercase;
  background: gray;
  color: white;
  text-decoration: none;
}

a:before,
a:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  margin-left: 50%;
  left: -15px;
  background: transpartent;
  transition: background .4s;
}

a:before {
  top: 0
}

a:after {
  bottom: 0
}

a:hover:after,
a:hover:before {
  background: purple;
}
<a href="#">Ссыль</a>

0

Просто как пример сделал - animation

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

html,
body {
  padding: 40px;
}

li {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 20px;
  position: relative;
}

li a {
  display: block;
}

li:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: 0.35s;
}

li:hover a {
  color: blue;
  animation: scale 0.3s steps(10);
}

li:hover:after {
  animation: circle 0.3s steps(10);
  border-top: 4px solid blue;
  border-bottom: 4px solid blue;
}

@keyframes circle {
  100% {
    border: 1px solid blue;
    border-radius: 50%;
    transform: rotate(360deg)scale(0.1);
  }
}

@keyframes scale {
  50% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(0.3);
  }
}
<li><a href="">ссылка</a></li>
<li><a href="">ссылка</a></li>
<li><a href="">ссылка</a></li>

1
  • Спасибо, помог) 19 окт 2018 в 5:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.