Animation of CSS Pseudo Element not working

Question

I'm trying to spin the a pseudo element, however, while the animation works perfectly on other elements, the pseudo element doesn't move.

HTML:

<div class="spinning">
    some content
</div>

CSS:

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.spinning::before {
  content: 'x';
  animation: spin 2s infinite linear;
}

jsfiddle: https://jsfiddle.net/7x0tasnh/

Applying the animation rule to the div works, with ::before it doesn't work. What am I missing?

Answer 1

Add display: inline-block to your :before

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.spinning::before {
  content: 'x';
  animation: spin 2s infinite linear;
  display: inline-block;
}

<div class="spinning"></div>