Css 为什么转换/变换不起作用：之前和之后

我的代码中的问题是它没有旋转：before（{）和：after（}）元素。
只有当我在他们身上设置了

位置：绝对
时，它才会旋转，这会干扰他们的位置，使他们很难回到想要的位置

有人能解释为什么会这样吗

更新：这段代码在chrome和IE 11中运行良好，但在firefox中运行不好。firefox出现上述问题时


/*您应该从这里开始阅读*/
a:以前{
不透明度：0；
内容：“{”；
字体大小：40px；
线高：1；
过渡：不透明度0.3s，变换0.4s；
}
a:以后{
不透明度：0；
内容：'}'；
字体大小：40px；
线高：1；
过渡：不透明度0.3s，变换0.4s；
}
a:悬停：之后{
不透明度：1；
变换：旋转（1圈）；
}
a:悬停：在之前{
不透明度：1；
变换：旋转（1圈）；
}
/*这之后不用再看了*/
a{
文字装饰：无；
颜色：黑色；
过渡：颜色0.3s；
位置：相对位置；
}
a:悬停{
颜色：红色；
}
身体{
保证金：0；
填充：0；
字体大小：25px；
颜色：黑色；
字号：700；
线高：1；
}
.导航{
显示：块；
保证金：100像素自动；
宽度：80%；
文本对齐：居中；
}
保险商实验室{
列表样式：无；
显示：内联块；
填充：0；
保证金：0；
边框顶部：2件纯黑；
底部边框：2件纯黑；
}
李{
浮动：左；
利润率：0.20px；
填充：15px 10px；
}
李阿{
保证金：0；
填充：0；
}
ul：之后{
内容：''；
显示：表格；
明确：两者皆有；
}








给出：before和：after元素显示：inline块；做得很好。
在Chrome中对我来说似乎很好……无论如何，如果使用
a
元素作为参考点，定位它们也绝对不会有问题。@CBroe它在firefox中不起作用。如果我使用
position:absolute
它们会爬过
a
元素内容