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

[Anonymous]

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

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

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

.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;
}< /code>






25


Years
experience
working

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