Search code examples
cssmozilla

What that is the attr() CSS function?

I am saw in the documentation the mozilla y i wonder how workings the attribute: attr().

this is the docs that I seem : mozilla

OK I understand this code:

p::before {
  content: attr(data-foo) " ";
}
<p data-foo="hello">world</p>

but my question is where could use attr() in css and what is diffrent between attr() from css and attr from javascript.

Solution

  • attr() used to manipulate attribute values.

    In your code 

    <p data-foo="hello">world</p>

    data-foo is an attribute

    so

    content: attr(data-foo) " ";

    here attr(data-foo) is the value ie hello so the output is hello world