Анимация линий, расходящихся в разные стороны

Question

Как сделать анимацию линий, расходящихся в разные стороны из одной точки при :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>

Answer 1

Одним элементом:

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.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%;
    transform: translateX(-50%) scaleX(2);
}

<div class="line"></div>

Убрать прозрачность:

.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%;
    display: block;
    transition:1s;
}
.line:hover::after{
    width: 50%;
}
.line:hover::before{
    width: 50%;
    transform: translateX(-100%);
}

<div class="line"></div>

Answer 2

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line:after{
    content:'';
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    opacity: .6;
    display: block;
    transition:.5s;
}
.line:hover:after{
    left: 0;
    right: 0;
}

<div class="line"></div>

Answer 3

Чуть переделанный вариант от @Stranger in the Q, так скажем для перфекционистов.

Изменения:

Анимация начинается от центра.
Для "растягивания" используется width, а не scaleX

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::after{
    content:'';
    width: 0;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transition:1s;
    transform: translate(-50%,-50%);
}
.line:hover::after {
    width: 100%;
}

<div class="line"></div>

Вариант для тех, кто топит за оптимизацию, фпс и прочее (ps тут используется scaleX)

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::after{
    content:'';
    width: 100%;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transition:1s;
    transform: translate(-50%,-50%) scaleX(0);
}
.line:hover::after {
    transform: translate(-50%,-50%) scaleX(1);
}

<div class="line"></div>

Ps. не претендую на галочку

Answer 4

Вариант SVG

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="200" height="24" viewBox="0 0 200 24" >  

<rect x="2" y="2" width="196" height="20" stroke="black" stroke-width="2" fill="none" /> 
<polyline points="2,11 196,11" fill="none" stroke="#FA7268" stroke-dasharray="0,194" >
  <animate attributeName="stroke-dasharray" begin="svg1.mouseover"  dur="0.5s" values="0,97 0,97;0,0,194,0" fill="freeze" restart="whenNotActive" />
</polyline>
</svg>

БЛОГ НА HUSL

Анимация линий, расходящихся в разные стороны

Ответы (4 шт):

Вариант SVG