CSS3

：

CSS関数

：

content()

　 編集：2022.07.09 by T.A.

[Edge]⛌。→●、mdn

要素の内容。

content( [text | before | after | first-letter | marker]? )
text
要素の文字列値。content() 内に値が指定されていない場合、text が指定されていたかのように動作する。
before
::before 疑似要素の文字列値。
after
::after 疑似要素の文字列値。
first-letter
::first-letter 疑似要素用に定義されるものと同じ、要素の最初の字°。
marker
::marker 疑似要素の文字列値。

HTML ： 

<h1>Loomings</h1>

CSS : 

h1::before { content: 'Chapter ' counter(chapter); }
h1 { string-set: header content(before) ':' content(text); }
h1::after { content: '.'; }

有名文字列 header の値は、 "Chapter 1: loomings" になる。

テスト
HTML：

ここに表示
¶[Edge]変化無し 別画面に表示させて。
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：