# How to Create a CSS Typewriter Effect

**Published by:** [jyoti.design](https://paragraph.com/@jyoti-design/)
**Published on:** 2022-12-21
**URL:** https://paragraph.com/@jyoti-design/how-to-create-a-css-typewriter-effect

## Content

To create a typewriter effect in CSS, you can use the animation property and apply it to a ::before or ::after pseudo-element of an element. The animation should involve changing the text of the pseudo-element from empty to the desired text, one character at a time, with a brief delay between each character. Here's an example of how you might do this:.typewriter { position: relative; overflow: hidden; white-space: nowrap; } .typewriter::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: white; animation: typing 3s steps(40, end); } @keyframes typing { from { width: 0 } to { width: 100% } } In this example, the ::before pseudo-element is used to create a white block that "types" the text of the element by increasing its width from 0 to 100% over a period of 3 seconds. The steps(40, end) value for the animation property causes the animation to be divided into 40 steps, with a delay of 75ms between each step. This creates the effect of the text being typed one character at a time. You can adjust the duration and number of steps to control the speed of the typewriter effect, and you can use the content property of the pseudo-element to specify the text that will be typed. Here's an example of how you might use this CSS to create a typewriter effect on a heading element:<h1 class="typewriter">Hello, World!</h1> I hope this helps! Let me know if you have any questions.

## Publication Information

- [jyoti.design](https://paragraph.com/@jyoti-design/): Publication homepage
- [All Posts](https://paragraph.com/@jyoti-design/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@jyoti-design): Subscribe to updates
- [Twitter](https://twitter.com/jyotidesign_): Follow on Twitter