以前にHTML/CSSのみで使用されていたテキストを動的に挿入しますか？

Question

私は、テキストの90％が同じで、アイテムのタイトルと説明だけが異なるリスティングのテンプレートを作成しています。私は、それぞれのものと同じテキストを混乱させたり編集したりする必要はありませんが、ある時点では異なるタイトルのものを参照しています。

コンテンツを動的に埋め込むために以前に使用されていたタイトルをプルすることができたのは、HTML5またはCSS3だけです。ほぼそれが変数であるかのように？あなたはタイトルを見ている、常に同じ

ザッツ

例：...ここで

タイトル（再使用する）

ユニークな説明ここ

コンテンツここではなどなど

Javascriptや他の言語を使用しないでください。CSS3やHTML5で最も基本的なjavascriptを利用できますが、JavaScriptがハッキングされていないのは、私がコーディングしているサイトでブロックされています。

私たちはここに非常に簡単なJavaScriptでそれを行うにしている場合は、プロジェクトからのコード例です...

第二のブロックにおける「アイテムのタイトルは」自動的H3タグから引き出されるべき

<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> 

（これはユニークで、すべてのH3タグが同じになるわけではないので、後でコピーするために必要な変数タグを追加する必要があります）

Answer 1

残念ながら、HTML5やCSS3では、私はパスしなければならない限られたjavascriptを使用して終了しました。必要

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

で呼び出され

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

。

Answer 2

現代のブラウザでは可能です。しかし、欠点がある。置換されたテキストを守るかコピーすることは不可能であろう。 browser support of css variable on caniuseを参照してください。現在、FF 31+、Chrome 49+、Safari 9.1 +/9.3 +でサポートされています。 IE、Edge 13、Opera 12のサポートはありません。

とにかく、私は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>