JSFiddle - React, Tailwind, and code Playground

by herde2

HTML

<p>ROCK</p>

CSS

p {
  width: max-content;  text-shadow: 
    calc(var(--offsetText) * 1px + 0.5em) 0 ,
    calc(var(--offsetText) * -1px - 0.5em) 0 
    ;
  min-width: calc(var(--offsetText) * 1px + 0.5em);
  animation: slide 3s infinite linear;
  margin: 0;
  overflow-y: hidden;
  color:tomato;
	font-size: 20em;
}
p:nth-child(odd),p:nth-child(even):before {
  animation-direction: reverse;
  color:lime
}
@keyframes slide {
  to {
    text-indent: calc(var(--offsetText) * -1px - 0.5em);
  }
}

JavaScript

let p=document.querySelectorAll('p');
for (i = 0; i < p.length; i++) {
  let tidt = p[i].clientWidth;
  p[i].style.setProperty('--offsetText',tidt)
}