# How to Create a CSS Typewriter Effect

By [jyoti.design](https://paragraph.com/@jyoti-design) · 2022-12-21

---

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.

---

*Originally published on [jyoti.design](https://paragraph.com/@jyoti-design/how-to-create-a-css-typewriter-effect)*