1

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

Как сделать появление зеленой точки на :hover?

1 ответ 1

5

Вариант 1

a {
  display: inline-block;
  padding: 25px;
  position: relative;
  background: #E6E988;
}

a:after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: green;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
}

a:hover:after {
  opacity: 1;
}
<a href="#">Link</a>

Вариант 2

a {
  display: inline-block;
  padding: 25px;
  position: relative;
  background: #E6E988;
}

a:after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: green;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .3s ease;
}

a:hover:after {
  transform: scale(1);
}
<a href="#">Link</a>

3
  • эффекты мне понравились ставлю плюсик
    – Randall
    31 июл 2018 в 19:48
  • Спасибо, сработало :) 2 авг 2018 в 16:38
  • @soledar10 поздравляю с новым достижением 20.000! 4 авг 2018 в 17:24

Ваш ответ

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

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