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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With