<a href="#" class="cle-type">
  <span class="cle-type-text">$ deploy --prod</span>
</a>

.cle-type {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a18;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  text-decoration: none;
  min-width: 160px;
}
.cle-type-text {
  display: inline-block;
  font:
    600 13px/1.4 ui-monospace,
    monospace;
  color: #00e5ff;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 2px solid transparent;
  vertical-align: bottom;
}
.cle-type:hover .cle-type-text,
.cle-type:focus-visible .cle-type-text {
  width: 14ch;
  border-right-color: #00e5ff;
  animation:
    cle-type-in 1.2s steps(14, end) forwards,
    cle-type-blink 0.7s steps(1) 1.2s infinite;
}
@keyframes cle-type-in {
  from {
    width: 0;
  }
  to {
    width: 14ch;
  }
}
@keyframes cle-type-blink {
  0%,
  50% {
    border-right-color: #00e5ff;
  }
  51%,
  100% {
    border-right-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-type:hover .cle-type-text,
  .cle-type:focus-visible .cle-type-text {
    width: 14ch;
    animation: none;
    border-right-color: #00e5ff;
  }
}