<a href="#" class="cle-caret">$ run --watch</a>

.cle-caret {
  position: relative;
  display: inline-block;
  padding: 2px 4px 4px;
  color: #2eb88a;
  font:
    600 14px/1.4 ui-monospace,
    monospace;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease 0.05s;
}
.cle-caret::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: #2eb88a;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cle-caret:hover,
.cle-caret:focus-visible {
  border-bottom-color: rgba(46, 184, 138, 0.5);
}
.cle-caret:hover::after,
.cle-caret:focus-visible::after {
  opacity: 1;
  animation: cle-caret-blink 1s steps(1) infinite;
}
@keyframes cle-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-caret:hover::after,
  .cle-caret:focus-visible::after {
    animation: none;
    opacity: 1;
  }
}