13

Is there a way to inherit node value into content attribute?

Like, if <h2/> tag value is set to "Random title", can I get this value inside content attribute in CSS?

I've tried content: inherit;, but it doesn't seem to work.

An example of my theory:

HTML:

<h2>Random title</h2>

CSS:

h2:after {
    content: inherit; /* should be "Random title" */
}

Thanks in advance!

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
tomsseisums
  • 13,168
  • 19
  • 83
  • 145

2 Answers2

18

No, there's no way to do that. That's not what inherit is for.

The closest you can get is this:

<h2 data-title="Random title">Random title</h2>

h2:after {
    content: attr(data-title);
}

..which is obviously horrible because of the duplication.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Note that if you're looking to "inherit" Unicode characters codes in this manner, you should be using the HTML character escape form of `[code];`, for example `data-title=""`. This is useful when using font-based icons such as IcoMoon. – Boaz Jun 16 '14 at 22:33
  • I think that's a brilliant idea, what so ever. – Kostas Siabanis Sep 11 '18 at 10:16
  • That's very useful! – Marius Jul 26 '21 at 15:03
10

CSS3 has a way, content: contents; but (a) it seems to be contrived in such a way as to not be useful; and (b) probably isn't implemented anywhere yet. See http://dev.w3.org/csswg/css3-content/#contents0

@thirtydot's answer is correct for now, at least.

Alohci
  • 78,296
  • 16
  • 112
  • 156