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 you have read our privacy policy.

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