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

Question

The problem in my code is that it is not rotating the :before ( { ) and :after ( } ) elements.
It rotates only if I set position: absolute on them, which disturbs their position and makes it difficult to bring back in wanted position

Can someone explain why this is happening?

Update: this code is working fine in chrome and IE 11 but not firefox. with firefox above problem

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

giving the :before and :after element display: inline-block; does the trick.