Animating the content attribute

Animating the content attribute.markdown

Animating the content attribute

In most browsers this is just going to show the letter 'A' but in the latest version of Chrome it should animate between 'A' and 'B'.

Not sure how useful this might be in the future, but it seems pretty cool!

A Pen by Robin Rendle on CodePen.

License.

index.html

<div class="element"></div>

style.css

@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;
}