Превращение разделенной границы в полную границу при наведении курсора в CSS ⇐ CSS

[Anonymous]

Я хочу создать границу, где верхняя и нижняя часть выглядят как открытые скобки [ ], сначала разделяясь на два небольших сегмента, а затем анимируясь до полного прямоугольника только при наведении.
После того, как наведение заканчивается, он хочет вернуться к нормальному состоянию, например, разделенная граница, проблема в том, что я не могу разделить границу.
Нужный мне результат.. .


Результат, который я получаю...


Вот мой код

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

.counter {
position: relative;
padding: 30px 30px 25px 38px;
display: flex;
align-items: center;
border-left: 10px solid #393c42;
/* Solid left border */
border-right: 10px solid #393c42;
/* Solid right border */
border-radius: 0;
/* No rounded corners initially */
transition: all 0.3s ease;
}

.counter:before,
.counter:after {
content: "";
position: absolute;
width: 40%;
/* Length of the border segment */
height: 10px;
/* Thickness of the border */
background-color: #393c42;
top: 0;
/* For the top border */
left: 0;
/* For the left part of the top border */
transition: all 0.3s ease;
}

.counter:after {
top: auto;
/* Remove the top positioning for bottom */
bottom: 0;
/* For the bottom border */
left: auto;
/* Remove left positioning */
right: 0;
/* For the right part of the bottom border */
}

.counter:hover:before,
.counter:hover:after {
width: 100%;
/* Expand borders to full width */
left: 0;
/* Reset for full-width hover */
right: 0;
}

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

25


Years
experience
working

Подробнее здесь: https://stackoverflow.com/questions/793 ... ver-in-css