Login/Register
'content' attribute to inherit node value
Asked Answered
Solved csscss-content
H

2

14

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!

Hannelorehanner answered 24/8, 2011 at 12:5 Comment(1)
If you just want to mirror the text, you can use something like text-shadow: black 20em 0 0; – Notwithstanding
B
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.

Berezniki answered 24/8, 2011 at 12:26 Comment(3)
Note that if you're looking to "inherit" Unicode characters codes in this manner, you should be using the HTML character escape form of &#x[code];, for example data-title="&#xe001;". This is useful when using font-based icons such as IcoMoon. – Tlaxcala
I think that's a brilliant idea, what so ever. – Frameup
That's very useful! – Parkman
D
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.

Drier answered 24/8, 2011 at 12:32 Comment(3)
Can't wait until content: contents; is supported! – Gleich
definitely need this feature! – Interferometer
8 years later and still no contents support :/ – Kuenlun

© 2022 - 2024 — McMap. All rights reserved.