1) Since the CSS version doesn't step and is useless on actual text (aka anything that word-wraps) that's really not viable. You're right, it only has one advantage, and honestly it's not enough of one to be worth it.

2) In your scripted version use textContent not innerHTML, otherwise you risk security issues, triggering partial HTML, and you make it slower since every time you make a change the parser gets involved.

3) The use of slice is wasteful too. You could just :after the underscore since the default behavior of generated content is inline-level.

4) Just put all the text into the tag then remove it BEFORE DOMContentLoaded (aka defer the script or load it right before </body>) into your string to animate with. Making two copies on the DOM is accessibility trash, just as saying style="" is incompetent nonsense in all but the rarest of corner cases. You might also want to look into the "new" HIDDEN attribute.

5) Be nice to see it coded to be self-scoping, so that multiple instances could be run on a page. Perhaps move the textContent and current index into data-attr?

6) Unless you're magically on the blacklists and actually care about IE11/earlier, there is no reason to set X-UA in 2022. NOT that there should EVER have been a reason to set it to anything but OLDER versions. (which is just part of why the recent change by the W3C to that META in the spec is utter BS)