Just CSS. Absolutely NO jQuery/javascript or any other programming language.

This is an empty <div id="writer"></div> structure, with all the text generated using just CSS.

It demonstrates the use of ::before and ::after to generate the text, and @keyframes to produce the typewriter effect.

This is a true typwriter effect with the cursor 'jumping' with each additional character rather that the smooth transition seen on other CSS only typewriters.

Each line of generated text is on screen for the same length of time, and the text stays centered no matter how long the generated text becomes.

It is also responsive and the text will shrink when the screen width is less than 1200px.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.