Html CSS使用关键帧更改内容

我想创建一个在悬停状态下旋转1s的按钮，并在动画中更改其内容。我正在使用并希望删除按钮在悬停时变成“x”按钮

理想情况下，解除覆盖时动画也会向后运行

那么如何在动画中更改伪元素的内容呢

这是我的关键帧动画：

@-webkit-keyframes {
    0% {
        content:'\f056';
        -webkit-transform:rotate(0deg);
    }
    50% {
        content:'\f057';
        -webkit-transform:rotate(360deg);
    }
    100% {
        -webkit-transform:rotate(720deg);
    }
}

我希望这一点能对你有所帮助

CSS

JS

.outside {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: red;
    border: 10px solid blue;
    color: white;
    text-align: center;
    line-height: 30px;
    transition: all 3s ease;
    transition-property: transform;
}
.outside:hover {
    transform: rotate(1080deg);
}

$('.outside').hover(
    function()
      {
       $('.outside').html('X');
       },
    function()
      {
       $('.outside').html('D');
      }
                    );