CSS伪元素的动画不起作用

Question

我正在尝试旋转 a 伪元素，但是，虽然动画在其他元素上完美运行，但伪元素不会移动。

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

添加display: inline-block到您的 :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>