4

I have the following text:

<span class="page-number">42</span>

And I want to create a pseudo-element with something like this:

span.page-number::after {
    content: attr(text());
}

Such that the content of the pseudo-element is the text of the element, in this case 42. Can I do something like that through some trickery?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
mlissner
  • 17,359
  • 18
  • 106
  • 169
  • 2
    No, no you can't. You could, perhaps, emulate it (so long as 42 is the actual forty-second span, or an element within the forty-second something), with a CSS counter, but there's no way for CSS to take the 'text of an element,' unless that text is stored within a (ideally custom `data-*`) attribute – David Thomas Oct 04 '13 at 00:09
  • http://stackoverflow.com/questions/7175113/content-attribute-to-inherit-node-value – thirtydot Oct 04 '13 at 00:14

1 Answers1

6

Use data-* attribute (i.e: data-number) and the CSS attr() getter function inside a ::before or ::after pseudo element:

span::after {
  content: attr(data-number);
}
<span class="page-number" data-number="Item No.42">42</span>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Well, one day when CSS is turing complete, we'll look back upon today as a better time. – mlissner Oct 04 '13 at 00:53
  • 2
    [Named strings](https://www.w3.org/TR/css-content-3/#named-strings) in CSS3 Generated Content allows referencing the element content, but it's not supported anywhere. – Tgr Aug 30 '17 at 22:22