Как сделать анимацию линий, расходящихся в разные стороны из одной точки при :hover
?
У меня есть одно решение, но здесь видно в центре, как линия находится над другой линией
https://jsfiddle.net/ws1nfmo6/
.line{
display: inline-block;
width: 200px;
height: 10px;
border:1px solid #000;
position: relative;
padding: 10px;
}
.line::before,
.line::after{
content:'';
width: 0;
height: 2px;
background: #FA7268;
position: absolute;
top: 50%;
left: 50%;
opacity: .6;
display: block;
transition:1s;
}
.line:hover::after{
width: 50%;
}
.line:hover::before{
width: 50%;
transform: translateX(-100%);
}
<div class="line"></div>