Question

Hey I am trying to place the ‘title’ attribute of a <section> tag inside a <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 repeat ‘General Information’ inside the <h3> tag but use CSS content along with attr() to get the info inside of the tittle attribute in the <section> tag and place it inside the <h3> tags.

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

   section h3:after 
   {
       content:attr(title);
   }

This as expected looks for the ‘title’ attribute inside of the <h3> tag instead of the <section> tag. Is there any way I can achieve what I am trying to accomplish? Is what I am trying to accomplish the right way of doing things? I know I could skip the <h3> tags altogether and format the <section> tag to display whatever text is in ‘title’ attribute the same way that the <h3> tag would.

Answer 1

The attr() function can only obtain an attribute from the element that’s generating the content. You won’t be able to get the section element’s title because it’s not the element that’s generating the content.

As ScottS mentions, you should really avoid having an empty heading element, as there wouldn’t be a point in having it there at all then. Your best bet is to either leave out the title attribute (is it really needed?), or leave the content duplicated.