Do you Know how to { content: attr({data-attribute}); } ?

We can pass the deta　　to el::before,after{ content:'';}

    <div class="button">
        <span data-attribute="HOME">HOME</span>
    </div>

    .button{
        span::before {
            content: attr(data-attribute);
            }
        }
    }

It's bery easy!!!

I created a simple animation using this mechanism.

Thanks！！！！

See the Pen content data-attribute by Rin_T_T (@Rin_T_T) on CodePen.