为什么 transition/transform 在 :before 和 :after 上不起作用

Question

我的代码中的问题是它没有旋转 :before ( { ) 和 :after ( } ) 元素。
它只有在我对它们设置 position: absolute 时才会旋转，这会扰乱它们的位置并使其难以回到想要的位置

有人可以解释为什么会这样吗？

更新：此代码在 chrome 和 IE 11 中运行良好，但在 Firefox 中运行不正常。使用 firefox 以上问题

        /* you should start reading from here..... */

        a:before{
            opacity: 0;
            content: '{';
            font-size: 40px;
            line-height: 1;
            transition: opacity 0.3s, transform 0.4s;
        }
        a:after{
            opacity: 0;
            content: '}';
            font-size: 40px;
            line-height: 1;
            transition: opacity 0.3s, transform 0.4s;
        }
        a:hover:after{
            opacity: 1;
            transform: rotateX(1turn);
        }
        a:hover:before{
            opacity: 1;
           transform: rotateX(1turn);
        }

        /* no need to read after this */

        a{
            text-decoration: none;
            color: black;
            transition: color 0.3s;
            position: relative;
        }
        a:hover{
            color: red;
        }
        body{
            margin: 0;
            padding: 0;
            font-size: 25px;
            color: black;
            font-weight: 700;
            line-height: 1;
        }
        .nav{
            display: block;
            margin: 100px auto;
            width: 80%;
            text-align: center;
        }
        ul{
            list-style: none;
            display: inline-block;
            padding: 0;
            margin: 0;
            border-top: 2px solid black;
            border-bottom: 2px solid black;
        }
        li{
            float: left;
            margin: 0 20px;
            padding: 15px 10px;
        }
        li a{
            margin: 0;
            padding: 0;
        }
        ul:after{
            content: '';
            display: table;
            clear: both;
        }

<div class="nav">
    <ul>
        <li><a href="">HELLO</a></li>
        <li><a href="">HELLO</a></li>
        <li><a href="">HELLO</a></li>
        <li><a href="">HELLO</a></li>
        <li><a href="">HELLO</a></li>
    </ul>
</div>

Answer 1

给 :before 和 :after 元素显示：inline-block；成功了。

为什么 transition/transform 在 :before 和 :after 上不起作用

Why transition/transform is not working on :before and :after

css

css-transitions