Снимок экрана прилагается объясняет все о желаемом эффекте. Я думал уменьшить ширину границы с 4px до 3px до 2px, я не хочу применять эффект замедления / облегчения. На данный момент, когда я нахожусь, это выглядит как это . Я хочу изменить это поле с помощью эффекта, показанного на первом снимке экрана.
Для справки я публикую код ниже:
&__link {
@include font-text(default, menuitem);
@include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
@include font-text(default, menuitem);
@include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&: after представляет код для поля. Заранее спасибо.