CSS 擬似要素::マーカーの詳細な説明

この記事では、CSS ::markerの興味深い疑似要素を紹介します。これを使用すると、テキスト番号をより興味深いものにすることができます。

::markerとは

CSS 疑似要素::marker 、CSS 疑似要素レベル 3 で追加され、CSS 疑似要素レベル 4 で改良された比較的新しい疑似要素です。Chrome 86 以降のブラウザーでサポートされています。

これを使用すると、要素に疑似要素を追加して、箇条書きや番号を生成することができます。

通常、次のような構造になります。

<ul>
  <li>伝染性</li>
  <li>ステージ</li>
  <li>ページ</li>
  <li>勇敢</li>
  <li>シェイマス</li>
  <li>顔のない</li>
</ul>

デフォルトでは特別なスタイルは追加されておらず、そのスタイルはおおよそ次のようになります。

::markerを使用すると、シリアル番号の前の小さなドットを変換できます。

li {
  左パディング: 12px;
  カーソル: ポインタ;
  色: #ff6000;
}
li::マーカー{
  コンテンツ: '>';
}

小さなドットを好きなものに変換できます。

::marker 疑似要素のいくつかの制限

まず、 ::markerに応答できる要素はリスト項目のみです。たとえば、 ul内のliとol内のliどちらもリスト項目です。

もちろん、他の要素で使用できないというわけではありません。リスト項目に加えて、 display: list-itemが設定されている任意の要素で::marker疑似要素を使用できます。

次に、疑似要素内のスタイルにはすべてのスタイル属性を使用できるわけではありません。現在使用できるのは以下のものだけです。

• すべてのフォントプロパティ - 関連するすべてのフォントプロパティ
• 色 -- 色の値
• コンテンツプロパティ - ::before 疑似要素のコンテンツに似たコンテンツ。シリアル番号コンテンツを入力するために使用されます。
• text-combine-upright (en-US)、unicode-bidi、direction プロパティ - 文書の書き方に関するもの

::マーカーアプリケーションの探索

たとえば、タイトルの前に次のような装飾がよく見られます。

あるいは、絵文字表現を使用することもできます。

どちらも::markerを使用した表示に非常に適しています。display display: list-item list-item以外の要素で使用する必要があることに注意してください。

<h1>Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>

h1 {
  表示: リスト項目;
  左パディング: 8px;
}
h1::マーカー{
  コンテンツ: '▍';
}
h1:n番目の子(2)::マーカー{
  内容: '😅';
}

CodePen デモ -- ::marker の例

::markerは動的に変化します

興味深いことに、 ::marker動的に変更することができ、これを使用すると、興味深いホバー効果を簡単に作成できます。

たとえば、選択されなかった場合は不幸になり、選択された場合は幸せになるという効果は次のとおりです。

li {
  色: #000;
  遷移: すべて .2s;
}
li:ホバー{
  色: #ff6000;
}
li::マーカー{
  内容: '😩';
}
li:hover::marker {
  内容: '😁';
} 

CodePen デモ -- ::marker の例

カウンターと一緒に使う

::marker疑似要素は、すべてcontent属性を持っているという点で、 ::before疑似要素や::after疑似要素と非常によく似ていることがわかります。

contentでは、いくつかの単純な文字列追加操作を実際に実行できます。これを使用すると、CSS カウンターのcounter-resetとcounter-incrementを使用して、 ::marker要素にシリアル番号を追加できます。

counter-incrementこちらを参照してください: MDN -- カウンターインクリメント

次のような HTML があるとします。

<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>赤ちゃんを育てるのはとても大変です。</h3>
<p>債務者、つまりボルプタティバスというものは存在しないと言うのは公平なことでしょうか?</p>
<h3>とても嬉しいです！</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

::markerと CSS カウンターcounter-increment使用して、自動カウントとh3の前の絵文字式を含む順序付きリストを実装します。

体 {
  カウンターリセット: h3;
}

h3 {
  カウンター増分: h3;
  表示: リスト項目;
}

h3::マーカー{
  表示: リスト項目;
  コンテンツ: "✔" counter(h3) " ";
  色: ライトサーモン;
  フォントの太さ: 太字;
}

効果は次のようになり、 ::marker要素にシリアル番号を自動的に追加する効果を実現します。

CodePen デモ -- ::marker の例

やっと

この記事では::markerとは何か、そしてその実用的なシナリオをいくつか紹介します。 ::beforeと::after同様の機能を実現できますが、CSS ではよりセマンティックなタグ::markerが提供されていることがわかります。これは、フロントエンド コード (HTML/CSS) のセマンティクスに誰もがより注意を払う必要があることも示しています。

さて、この記事はこれで終わりです。お役に立てれば幸いです😃

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

ご質問やご提案がございましたら、お気軽にご連絡ください。これはオリジナルの記事であり、私の文章力には限界があります。記事に誤りがある場合はお知らせください。

テキスト番号をより面白くする CSS ::marker に関するこの記事はこれで終わりです。CSS ::marker に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。