Menu com ::before e translate, alguém manja?

Recentemente postei uma dúvida sobre um menu q queria fazer e o professor me disse q poderia usar o before e o translate. Mas não consigo avançar desse ponto. Alguem sabe oq está faltando? Segue o link do exemplo de menu: http://spab-rice.com/wordpress/vavo/demo/

HTML
<nav class="nav__left">
            <ul>
                <li><a href="#">INÍCIO</a></li>
                <li class="sobre"><a href="#">SOBRE NÓS</a></li>
            </ul>
        </nav>


CSS
.nav__left li::before{
        content: "INÍCIO";
        bottom: 0em;
        color: chartreuse;
        position: absolute;
        transform-origin: top bottom;
        transform: translateY(-100%);
       }

    .nav__left li:hover{
        transform: translateY(100%);
        top: 0;
        left: 0;
        transition: 0.4s;
        opacity: 0;
    }