Dynamically insert text used previously with only HTML/CSS?

Question

I'm building a template for listings in which 90% of the text is the same, and just the item title and description is different. I don't want to have to mess with or edit the text that is the same in each one but at some point it references in the title which is different.

Is there anyway in just HTML5 or CSS3 that I could pull the title used previously to dynamically fill the content out? Almost as if it was a variable?

Eg...

Title Here (to be used again)

Unique description here

Content Thats Always The Same

You are looking at Title Here etc etc etc.

No Javascript or other languages please - at if can't be done in a hacky way with CSS3 or HTML5 at worst the most basic javascript available, but mostly javascript is blocked on the site i'm coding for.

If we're to do it with very simple Javascript here is example code from project...

<div class="content-inner block4 s-text" style="margin-top:-25px">
<h3>Title of Item.</h3>
<p style="text-align: justify;">This is all about the item etc etc etc</p>

<div id="WhatsIncludedBlock">
<div class="content-inner block4 s-text">

<h3>What's Included?</h3>
<p class="para">
<ul><a style="text-decoration: none; cursor: default;"><img style="padding-right: 7px; vertical-align:-1%;" src="http://images.com/bullet2.png" width="10px" height="10px" float="left" alt="bullet point" class="hover"></a>Brand new "Title of Item" direct from supplier.</ul>

Where "Title of Item" in the second block should be automatically pulled in from the H3 tag (which is unique, not all H3 tags will be the same obviously, we'd need to add whatever variable tags required here to make it copy later on)

Answer 1

In modern browsers you can. But there will be drawback: it would be impossible to seclect or copy substituted text. See browser support of css variable on caniuse. Currently it is supported in FF 31+, Chrome 49+, Safari 9.1+/9.3+. No any support in IE, Edge 13- and Opera 12.

Anyway, I see no reasons to refuse using some templating engine like doT.

h3::after {
  content: var(--title);
}

<section style="--title: 'First title'">
  <!-- This following content is equal for all sections -->
  <h3></h3>
  <p>Anything here</p>
</section>

<section style="--title: 'The second one'">
  <!-- This following content is equal for all sections -->
  <h3></h3>
  <p>Anything here</p>
</section>

<section style="--title: 'And the last'">
  <!-- This following content is equal for all sections -->
  <h3></h3>
  <p>Anything here</p>
</section>

Answer 2

As others have said, not possible with HTML5 or CSS3 unfortunately, so I ended up using limited javascript which should pass.

<script language="javascript">
var title1
title1 = 'Title of Item';
</script>

Called with

<p><script>document.write (title1);</script></p>

Where needed.