Как сделать появление зеленой точки на :hover
?
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);
}
<a href="#">Link</a>