<button id="animation" class="anim">abc</button>
<style>
#animation {
all: unset;
position: relative;
font-size: 300%;
}
#animation::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: red;
left: 0;
top: 0;
}
#animation.anim::before{
animation: animation 1s;
}
@keyframes animation {
from {
width: 0;
}
to {
width: 100%;
}
}
</style>
<script>
document.addEventListener("click", event => {
var target = event.target;
target.classList.remove("anim");
document.documentElement.clientWidth;
target.classList.add("anim");
});
</script>