Love it! I used the feedback from the comments and tweaked it a bit:
Use ch as unit
Use the ::after pseudo to insert a vertical bar character with blink animation
Number of characters is configurable as CSS variable
I animate the width of the typed text using this trick. You can't animate from 0 to auto, but you can use max-width: 0 and then animate to a fixed number of characters: max-width: 25ch!
Love it! I used the feedback from the comments and tweaked it a bit:
chas unit::afterpseudo to insert a vertical bar character with blink animationauto, but you can usemax-width: 0and then animate to a fixed number of characters:max-width: 25ch!Awesome, thanks for sharing. 😀