css - CSS伪元素的动画不起作用

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

将 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>