フォント・アイコンを要素の前に置く:string-font-icon
<style>
p::before {
content: '\2708';
border: 1px solid #000;
background-color: red;
padding: 6px;
}
</style>
<body>
<p title="便名 9527">フライト番号9527</p>
</body>
要素:string-textの前にフォントアイコンを配置
<style>
p::before {
content: '<<';
}
p::after {
content: '>>';
}
</style>
<body>
<p title="便名 9527">フライト番号9527</p>
</body>
要素の前には、タグ内のデータ
<style>
p::before {
content: attr(title)';';
}
</style>
<body>
<p title="便名 9527">フライト番号9527</p>
</body>
エレメントの前にイメージを配置
<style>
p::before {
content: url('https://p1-..com/tos-i-t2oaga2asx/gold-assets/favicons/.ico~tplv-t2oaga2asx-.image');
}
<style>
<body>
<p title="便名 9527">フライト番号9527</p>
</body>
要素カスタム番号
<style>
header {
/* 初期値0のカウンタ'first-level'を設定する。*/
counter-reset: first-level 0;
}
header h1 {
/* 初期値0の'second-level'というカウンターを設定する。*/
counter-reset: second-level 0;
}
header h1:before {
/* セクション'ファーストレベル'カウンターの値を1増やす*/
counter-increment: first-level 1;
content: counter(first-level) ".";
}
header h2:before {
/* セクション'セカンドレベル'カウンターの値を1増やす*/
counter-increment: second-level 1;
content: counter(first-level) "."counter(second-level) ".";
}
</style>
<body>
<header>
<h1></h1>
<h2>最初のサブセクション</h2>
<h2>第2サブセクション</h2>
<h2>第3サブセクション</h2>
<h1></h1>
<h2>最初のサブセクション</h2>
<h2>第2サブセクション</h2>
<h1></h1>
<h2>最初のサブセクション</h2>
<h2>第2サブセクション</h2>
</header>
</body>
