Hover эффект появления точки

242

07 октября 2018, 01:00

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

Answer 1

Вариант 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); 
}