Доброго времени суток всем! Делая верстку столкнулся с тем, что не могу сделать hover эффект как указано в дизайне (ниже прикрепил часть скрина), так же приложил код который уже есть. Возможно кто то подскажет реализацию подобного эффекта без участия псевдоэлемента after, а с использованием например . Буду благодарен вашей помощи!
.left__blocks {
min-height: 237px;
box-shadow: 0 3px 7px rgba(67, 80, 102, 0.09);
border-radius: 20px;
background-color: #ffffff;
margin-bottom: 19px;
max-width: 100%;
}
.status__project {
width: 230px;
}
.title__block {
color: #435066;
font-size: 16px;
font-weight: 700;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 13px;
}
.line__desing {
width: 96px;
height: 4px;
border-radius: 0 2px 2px 0;
background-color: #0cdab8;
left: 0;
}
ul.status__projet__list {
color: #435066;
list-style: none;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 14px;
font-size: 14px;
font-weight: 400;
line-height: 31.96px;
transition: all 300ms;
}
.status__pay {
position:relative;
align-items: center;
display: flex;
transition: all 200ms ease;
}
.status__pay::after {
content: "";
min-width: 14px;
min-height: 14px;
right: 15px;
position: absolute;
border-radius: 7px;
background-color: #535fde;
}
a li.status__pay:hover {
transform: translateX(10%);
transition: all 300ms ease;
color: #7800e2;
font-weight: 500;
}
<div class="status__project left__blocks">
<!-- // Блок статуса -->
<div class="title__block">Тип</div>
<div class="line__desing"></div>
<ul class="status__projet__list">
<a href="#">
<li class="status__pay">Новые</li>
</a>
<li class="status__new">Новые</li>
<li class="status__skam">Новые</li>
</ul>
</div>
