CSS Pseudo Element的动画不起作用

Question

我正在尝试旋转一个伪元素，但是，当动画在其他元素上完美运行时，伪元素不会移动。

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/

将动画规则应用于div作品，::before无效。我错过了什么？

Answer 1

将<{1}}添加到您的：之前

display: inline-block

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

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