CODEWITHSUNDEEP
csspseudo-elementantenna-house
Hobbes
Hobbes

Reputation: 2115

CSS pseudo-elements: using attr to refer to an attribute of another element

I'd like to use the ::before pseudoelement to insert some text that is found in another area of the HTML file.

My HTML: 

<html>
    <body notetext="Note">
     ...
    <p class="bodytext">Don't press the red button!</p>
    </body>

I can use content:attr to select an attribute of the current element, but is it possible to refer to an attribute of an ancestor element? Like you can in XPath, for example (//body/@notetext)

the non-working CSS I have: 

p.bodytext::before {
    content:attr(notetext);
}

I'm using Antennahouse Formatter, for CSS Paged Media.

Upvotes: 4

Views: 3355

Answers (3)

Tony Graham
Tony Graham

Reputation: 8068

Antenna House Formatter has an -ah-attr-from() extension function.

The function prototype is as for attr() but with the addition of a parameter specifying the ancestor element:

-ah-attr-from( <from-name> , <attr-name> <type-or-unit>? [ , <fallback> ]? )

NB - I'm an employee of Antenna House.

Upvotes: -2

Der Alex
Der Alex

Reputation: 854

With css only it is not possible to refer to another elements content. It is also not possible to refer to a parent element. I would advise you to use javascript and data attributes to solve your problem.

Temani Afif's answer is great an i would recommend it as long as you don't need to support Internet Explorer. Otherwise you would need a css custom properties IE polyfill.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272582

If you can alter the HTML you may consider the use of CSS variables like this:

p.bodytext::before {
  content: var(--text);
}
<body style="--text:'Note '">

  <p class="bodytext">Don't press the red button!</p>
</body>

Upvotes: 6

Related Questions