Typing with Typo Correction and Pause Css  | Text Typing Effect Html 

 <div class="typing animate"></div>  

There is all the HTML code for the Typing with Typo Correction and Pause. Now, you can see output without CSS, then we write css & javascript for the Typing with Typo Correction and Pause.

output

Simple Blank Output with Blank html tag

CSS Code

 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 body {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  background: #eee;  
 }  
 .typing.animate {  
  width: 21ch;  
  border-right: 0.1em solid black;  
  font-family: monospace;  
  font-size: 2em;  
  animation: type 2.5s steps(20), writer 1s infinite alternate, delete 0.5s steps(5) 2.5s, type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;  
  overflow: hidden;  
  white-space: nowrap;  
  cursor: pointer;  
 }  
 .typing.animate::before {   
  content: "Hello, I'm Codewithrandom";  
  animation: type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;  
 }  
 @keyframes type {  
  from {  
   width: 0;  
  }  
  to {  
   width: 21ch;  
  }  
 }  
 @keyframes type2 {  
  from {  
   width: 16ch;  
   content: "Hello, I'm Codewithrandom. "  
  }  
  to {  
   width: 20ch;  
   content: "Hello, I'm Codewithrandom. "  
  }  
 }  
 @keyframes type3 {  
  from {  
   width: 20ch;  
   content: "Hello,I'm Codewithrandom. Welcome to my Website!  
  }  
  to {  
   width: 43ch;  
   content: "Hello,Codewithrandom. Welcome to my Website!"  
  }  
 }  
 @keyframes writer {  
  50% {  
   border-color: transparent;  
  }  
 }  
 @keyframes delete {  
  from {  
   width: 21ch;  
  }  
  to {  
   width: 16ch;  
  }  
 }  

Here is our updated output CSS.

output

Javascript code 

 $(document).ready(() => {  
  let typingElement = $('.typing');  
  typingElement.on('click', (e) => {  
   typingElement.removeClass('animate');  
   setTimeout(() => typingElement.addClass('animate'), 1);  
  })  
 });  

Final output