I use the code below to display a typewriter animation effect (source https://codepen.io/thiagoteles/pen/ogoxLw). I have set everything on slow speed on purpose for clearer results. Everything works just fine but each letter appearing one by one is not fully visible because the cursor on its right always erases some of its part. Is there a way to fix this with pure css or do I have to use javascript? Thanks

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */
  min-height: 100%;
  overflow: hidden;
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family: ;  
  background-color: black;  
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 4px solid green;
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    

/* Animation */
  animation: typewriter 100s steps(44) 1s 1 normal both,
             blinkTextCursor 1000ms steps(544) infinite normal;
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
@keyframes blinkTextCursor{
  from{border-right-color: green;}
  to{border-right-color: transparent;}
<!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>