20

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
John ClearZ
  • 952
  • 2
  • 9
  • 16
  • 5
    You would not want to generate your `h3` text that way anyway, because it would leave the `h3` blank for search engines. If anything, to reduce duplication, you should get rid of the `title` on the `section` and use the `h3` only as the "title". – ScottS Aug 01 '12 at 22:45
  • I add similar problem, and I found this post useful. I hope it will help you too: https://stackoverflow.com/questions/42034739/using-attribute-value-of-a-parent-in-a-child-using-css3-attr-function – Gregoire Cattan Feb 16 '21 at 17:52

1 Answers1

18

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356