DEV Community


Discussion on: Typing effect without Javascript

ekeijl profile image

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!

stokry profile image
Stokry Author

Awesome, thanks for sharing. 😀