Getting an attribute from the parent selector is CSS using the contents: attr ();

Question

Hey, I'm trying to put the attribute 'title' in the <section> tag inside the <h3> tag located just below and inside the <section> tag.The following works

<section title="General Information"> <h3>General Information</h3> .... </section> 

what I would like to do is not to repeat the "General Information" inside the <h3>, but use the CSS content along with attr () to get the information inside the tittle attribute in the <section> and put it inside the <h3> tags.

  <section title="General Information"> <h3></h3> .... </section> section h3:after { content:attr(title); } 

This, as expected, looks for the attribute 'title' inside the <h3> tag instead of the <section> tag. Is there a way to achieve what I'm trying to achieve? Am I trying to make the right way to do something? I know that I can skip the <h3> tags in general and format the <section> tag to display any text in the 'title' attribute just like the <h3> tag.

Answer 1

The attr() function can only get an attribute from an element that generates content. You cannot get the section title element because it is not a content generating element.

As ScottS mentions, you really should avoid having an empty header element, since then it would not make sense to have it there at all. It’s best to either leave the title attribute (is it really needed?), Or leave a duplicate of the content.