<div class="element"></div>
@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

.element {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  &:after {
    animation: changeLetter 3s linear infinite alternate;
    display: block;
    content: "A";
    font-size: 80px;
  }
}


body {
  font-family: Georgia, serif;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.