'content' attribute to inherit node value

css css-content
tomsseisums picture tomsseisums · Aug 24, 2011 · Viewed 7.5k times · Source

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!

Answer

thirtydot picture thirtydot · Aug 24, 2011

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.

Related questions

Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More
Adding HTML entities using CSS content

How do you use the CSS content property to add HTML entities? Using something like this just prints &nbsp; to the screen instead of the non-breaking space: .breadcrumbs a:before { content: '&nbsp;'; }

Read More
CSS content property: is it possible to insert HTML instead of Text?

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back</a>'; } this would …

Read More