<pre class="caret-bar">$ npm run build <span>&nbsp;</span>
</pre>

<pre class="caret-block">$ npm run buil<span>d</span>
</pre>

<pre class="caret-underscore">$ npm run build <span>&nbsp;</span>
</pre>

body {
  font-size: 150%;
  padding: 3rem;
}

pre {
  background: #000;
  color: white;
  font-family: monospace;
  padding: 1ch;
}

pre.caret-bar > span {
  animation: blink 1s step-end infinite;
  border-left: 2px solid white;
}

pre.caret-block > span {
  background-color: hsla(1, 1%, 100%, 1);
  color: #000;
}

pre.caret-underscore > span {
  animation: blink 1s step-end infinite;
  border-bottom: 2px solid white;
}

@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}