为什么转换/转换不起作用：before和：after

Question

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

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

更新：此代码在chrome和IE 11中工作正常，但不是firefox。使用firefox以上的问题

＆＃13;

＆＃13;

        /* 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;
        }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

给出：before和：after元素显示：inline-block;诀窍。