After conducting extensive research, I have yet to come across a similar inquiry that provides a solution to my issue. However, I suspect this may be a common problem and could potentially be a duplicate.
I currently have an impressive CSS Underline animation in place when I hover over a piece of text. You can view the example here:
let options = ['Over Here', 'This Way', 'At Me']
$(document).ready(function () {
let jobInterval = setInterval(() => changeText(), 3000)
})
function changeText () {
let newText = options[Math.floor(Math.random() * options.length)]
$('#change').text(newText)
}#change {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
#change:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 3s ease, background-color 3s ease;
}
#change:hover:after {
width: 100%;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1>
<span>Look </span>
<span id="change">Over Here</span>
</h1>
</div>https://jsfiddle.net/6b2cqrj7/7/
However, I am looking to achieve this effect without relying on hovering. My goal is to have a piece of text that changes every X seconds, with the underline animating for X seconds before the word switches and the animation restarts. Essentially, creating a timer-like bar.
I have experimented with various approaches, but due to the limitations of manipulating the ::after tag using JS/JQuery, I am struggling to figure out a solution. Since the animation is applied to the ::after tag, simply adding a new class won't suffice as I need to alter the CSS property for the transition to take effect. Or so I believe.
This marks my initial attempt at utilizing CSS animations, leaving me quite puzzled by this challenge.