How can I slide out a line on the left and right side of text on mouse hover - html

Question

Essentially, I'm looking to animate a line on the left and right side of text that will increase its width to the end of the display when I hover over the text.
Perhaps this will help...
without hovering:
SOME TEXT
on hover:
----------------------------SOME TEXT--------------------------------------------------------------------------------------
I'd like these lines to animate outward to the end on the parent. I've tried using the pseudo elements but had no luck. Some help would be greatly appreciated.

Answer 1

Here's how I'd do it. Feel free to play with animation duration and timing function:
.separator {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.separator:before, .separator:after {
content: '';
flex-grow:0;
height: 1px;
background-color: currentColor;
transition: flex-grow .6s cubic-bezier(.4,0,.2,1);
margin: 0 .5rem;
}
.separator:hover:before, .separator:hover:after {
flex-grow: 1;
}
<div class="separator">SOME TEXT</div>
<div style="width: 50%; margin-top: 60px;border: 1px solid red; color: blue; padding: 3rem 0;">
<div class="separator">TEST</div>

Answer 2

Here's a JavaScript solution. Adds - to either side until it reaches the end of the line, and it removes the dashes when the mouse moves away.
To prevent the overflow, you just have to track the clientHeight and stop adding dashes as soon as the height increases.
var div = document.getElementsByClassName('test')[0];
var origText = div.innerText;
var origHeight = div.clientHeight;
var tooLong = false;
var addTxtInt;
div.addEventListener('mouseover', function() {
addTxtInt = setInterval(function() {
if (tooLong)
return;
if (div.clientHeight > origHeight) {
div.innerText = div.innerText.substring(1, div.innerText.length - 1);
tooLong = true;
return;
}
div.innerText = "-" + div.innerText + "-";
if (div.clientHeight > origHeight) {
div.innerText = div.innerText.substring(1, div.innerText.length - 1);
tooLong = true;
return;
}
}, 80);
});
div.addEventListener('mouseleave', function() {
clearInterval(addTxtInt);
div.innerText = origText;
tooLong = false;
});
.test {
display: block;
overflow: hidden;
text-align: center;
}
<div class='test'>SOME TEXT</div>