<div class="container">
  <code class="writing-text">Just apply "writing-text" class to an element and let the magic happend!</code>
</div>
.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
code {
  width: 400px
}

.writing-text:after {
  content: ' ';
  display: inline-block;
  background: rgba(120,120,120,0.7);
  position:relative;
  width: 10px;
  height: 1.1em;
  vertical-align: middle;
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-funciton: ease-out;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: 1
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
View Compiled
const writingEl = document.querySelector('.writing-text');
const text = writingEl.innerHTML
writingEl.innerHTML = '';
let index = 0

const interval = setInterval(function(){
  writingEl.innerHTML = text.substring(0,index++);
  if(index == text.length + 1)
    clearInterval(interval);
}, 100);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.