旋转转换：在psuedo-element不工作之后

Question

我有一个图标字体，我用作:after伪元素的内容。触发click事件时，此伪元素的父元素将获得.active的类，并向上滑动。我试图使用转换使伪元素旋转180度。出于某种原因，在Google Chrome开发过程中，它不适用于我。我在同一个浏览器上尝试在Codepen中进行测试，一切正常。

这是我的css：

.deals-container-mobile p:after {
    content:"\e017";
    display:inline-block;
    font-family: 'vicons';
    font-size: 24px;
    position: absolute;
    right: 20px;
    top: 13px;
    transition: transform 0.4s ease;
}

.deals-container-mobile.active p:after {
    transform: rotate(180deg);
}

注意我为了简单而省略了前缀，但是如果你需要看到它我可以包括。

基本上，当单击容器时，它会获得一个活动类，并且它会向上滑动。 :after伪造元素最初是指向下方的箭头。当容器向上滑动时，我希望箭头旋转指向上方。发生转换，箭头指向上方，但没有转换。

谢谢！