Эффект динамического наведения границы ⇐ CSS

[Anonymous]

Мне удалось создать очень красивый эффект динамической границы

Поэтому, если вы запустите мой код, вы увидите, что я сделал



вот код и работающая страница: https://jsfiddle.net/pv7hsgmq/< /p>

Код: Выделить всё

body {
background-color: rgb(58, 58, 58);
}

.selects {
float: right;
margin-right: 10vh;
padding: 0;
margin-top: 10vh;
}

.selects li {
display: inline-block;
cursor: pointer;
font-size: 19px;
}

.animatedCard {
place-items: center;
display: inline-grid;
position: relative;
height: 50px;
width: 230px;
background: #00000000;
overflow: hidden;
}

.animatedCard::before {
position: absolute;
content: "";
width: 100%;
height: 50%;
background: white;
transform: rotate(45deg);
}

.animatedCard:hover::before {
animation: animate 2s linear infinite;
}

@keyframes animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.animatedCard::after {
position: absolute;
content: "";
inset: 2px;
background: rgb(0, 0, 0);
border-radius: 8px;
}

.selects li:hover {
transform: scale(1.2);
transition: 100ms;
border-bottom-width: 10px solid white;
}

Код: Выделить всё

[list]

[*]¿Que es Front-end?

[/list]

Мой вопрос: как я могу добиться этого эффекта границы, но с помощью прозрачный фон

Подробнее здесь: https://stackoverflow.com/questions/792 ... ver-effect