Fiz uma animação simples de opacidade - 


```css
.myNameDisplayBlock::after {
  content: "|";
  margin-left: 5px;
  animation: blinkArrow 0.7s infinite;
}

@keyframes blinkArrow {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
```

Mas por algum motivo NÃO ESTÁ FUNCIONANDO NO CHROME, já testei no FIREFOX e nele funciona, estou usando nextJs, não se interfere em algo.

Ué, testei no Chrome e funcionou: https://jsfiddle.net/hL83n62p/

Descobri!! Por algum motivo no CHROME tenho que fazer o CSS assim: 


```css
.myNameDisplayBlock::after {
  content: " ";
  display: inline-block;
  width: 3px;
  height: 30px;
  margin-left: 5px;
  animation: blinkArrow 0.7s infinite;
  background-color: var(--color-blue1);
}
```

Caso eu bote apenas `content: "|"` não funciona.

Animações no nextJs

Fiz uma animação simples de opacidade - .myNameDisplayBlock::after { content: "|"; margin-left: 5px; animation: blinkArrow 0.7s infinite; } @keyframes blinkArrow { 0%, 100% { opacity: 1;...