興味深い CSS3 擬似要素::マーカーを共有すると、リスト番号がより鮮明になります。

この記事では、興味深く興味深い CSS3 疑似要素 ::marker を紹介します。これを使用すると、リストの番号をより興味深く鮮やかにすることができます。興味があれば、ぜひ一緒に見に来てください！

::markerとは

CSS擬似要素::markerはCSS擬似要素レベル3から新たに追加されました. CSS Pseudo-Elements Level 4 で完成された比較的新しい疑似要素で、Chrome 86 以降のブラウザでサポートされています。 [学習ビデオ共有: css ビデオ チュートリアル ]

これを使用すると、要素に擬似要素を追加して箇条書きや数字を生成できます。

通常、次の構造になっています:

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>

デフォルトでは特別なスタイルは追加されません。そのスタイルはおおよそ次のようなものです:

##::marker を使用して、シリアル番号の前にある小さなドットを変換できます:

li {
  padding-left: 12px;
  cursor: pointer;
  color: #ff6000;
}
li::marker {
  content: '>';
}

次に、その小さなドットを必要なものに変換できます:

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

まず第一に、

::marker に応答できる要素は list item# のみです。 # # たとえば、ul 内の li と ol 内の li は両方とも list item です。 もちろん、これは他の要素で使用したい場合に方法がないという意味ではありません。

list item

を除いて、任意の display: list- を設定できます。 item 要素は ::marker 疑似要素を使用します。 第二に、疑似要素内のスタイルについては、すべてのスタイル プロパティを使用できるわけではありません。現在使用できるのは次のとおりです:

すべてのフォント プロパティ
• - - したがって、フォント プロパティは関連しています
colo
• r -- カラー値
コンテンツ プロパティ
• -- コンテンツ コンテンツ ( に似ています) ::before シリアル番号を埋めるために使用される疑似要素のコンテンツ。contenttext-combine-upright (en-US)、unicode-bidi、および方向プロパティ -- ドキュメントに関連する書き込み方向
• ::マーカーのいくつかのアプリケーションを探索する

#たとえば、タイトルの前にいくつかの装飾が見られることがよくあります:

または、絵文字表現を使用することもできます:

はすべて、

::marker

を使用した表示に非常に適しています。 list-item 以外の要素で使用する場合は必須です。表示: list-item:

<h1 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet</h1>
<h1 id="Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet">Lorem ipsum dolor sit amet</h1>

CodePen デモ -- : :マーカーの例

https://codepen.io/ Chokcoco/pen/eYvZmpW

::マーカーは動的に変更できます

興味深いことに、

::マーカー

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

たとえば、選ばれなかった場合は嬉しくありませんが、選ばれた場合は幸せになります:

##CodePen デモ -- ::マーカーの例

https://codepen.io/Chokcoco/pen/eYvZmpW

カウンターと併用

::marker

擬似要素は、

::before

および ::after 擬似要素と非常に似ていることがわかります。それらはすべて content 属性を持っています。 content では、いくつかの単純な文字列追加操作を実際に実行できます。これを使用すると、CSS カウンター

counter-reset

および counter-increment と連携して、::marker 要素にシリアル番号を追加する操作を実装できます。 counter-increment についてあまり詳しくない場合は、ここにアクセスしてください: MDN -- counter-increment

次の HTML があるとします。 <pre class='brush:php;toolbar:false;'>&lt;h3 id=&quot;Lorem-nbsp-ipsum-nbsp-dolor-nbsp-sit-nbsp-amet&quot;&gt;Lorem ipsum dolor sit amet.&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/p&gt; &lt;h3 id=&quot;Itaque-nbsp-sequi-nbsp-eaque-nbsp-earum-nbsp-laboriosam&quot;&gt;Itaque sequi eaque earum laboriosam.&lt;/h3&gt; &lt;p&gt;Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?&lt;/p&gt; &lt;h3 id=&quot;Laudantium-nbsp-sapiente-nbsp-commodi-nbsp-quidem-nbsp-excepturi&quot;&gt;Laudantium sapiente commodi quidem excepturi!&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/p&gt;</pre>

::marker

と CSS カウンター

counter-increment

を使用して、自動カウントと絵文字式が前に付く h3 の順序付きリストを実装します。 <pre class='brush:php;toolbar:false;'>body { counter-reset: h3; } h3 { counter-increment: h3; display: list-item; } h3::marker { display: list-item; content: &quot;✔&quot; counter(h3) &quot; &quot;; color: lightsalmon; font-weight: bold; }</pre> の効果は次のとおりです。これは、シリアル番号を ::marker 要素に自動的に追加する効果を実装します。

CodePen デモ -- ::マーカーの例

https://codepen.io/chriscoyier/pen/ExNWmee

最後に

この記事では、::マーカーとは何か、そしてその実践的なシナリオのいくつかを紹介します。 ::after も同様の機能を実現できますが、CSS はさらにセマンティックなタグ ::marker を提供します。これは、全員が独自のフロントエンド コード (HTML/ CSS) セマンティクスにもっと注意してください。 さて、この記事はここで終わります。お役に立てば幸いです :)

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上が興味深い CSS3 擬似要素::マーカーを共有すると、リスト番号がより鮮明になります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。