DEV Community

Rin
Rin

Posted on

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.

Top comments (0)