ホームページ > 記事 > ウェブフロントエンド > 興味深い CSS3 擬似要素::マーカーを共有すると、リスト番号がより鮮明になります。
この記事では、興味深く興味深い CSS3 疑似要素 ::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
です。 もちろん、これは他の要素で使用したい場合に方法がないという意味ではありません。
を除いて、任意の display: list- を設定できます。 item 要素は ::marker
疑似要素を使用します。 第二に、疑似要素内のスタイルについては、すべてのスタイル プロパティを使用できるわけではありません。現在使用できるのは次のとおりです:
text-combine-upright (en-US)、unicode-bidi、および方向プロパティ -- ドキュメントに関連する書き込み方向または、絵文字表現を使用することもできます:
はすべて、
::marker を使用した表示に非常に適しています。 list-item
以外の要素で使用する場合は必須です。表示: list-item:
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
CodePen デモ -- : :マーカーの例
https://codepen.io/ Chokcoco/pen/eYvZmpW興味深いことに、::マーカーは動的に変更できます
たとえば、選ばれなかった場合は嬉しくありませんが、選ばれた場合は幸せになります:
##CodePen デモ -- ::マーカーの例
https://codepen.io/Chokcoco/pen/eYvZmpWカウンターと併用::marker
および ::after
擬似要素と非常に似ていることがわかります。それらはすべて content
属性を持っています。 content
では、いくつかの単純な文字列追加操作を実際に実行できます。これを使用すると、CSS カウンター
および counter-increment
と連携して、::marker
要素にシリアル番号を追加する操作を実装できます。
counter-increment
についてあまり詳しくない場合は、ここにアクセスしてください: MDN -- counter-increment
次の HTML があるとします。 <pre class="brush:html;toolbar:false;"><h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Itaque sequi eaque earum laboriosam.</h3>
<p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
<h3>Laudantium sapiente commodi quidem excepturi!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></pre>
::markerと CSS カウンター
counter-increment を使用して、自動カウントと絵文字式が前に付く h3
の順序付きリストを実装します。 <pre class="brush:css;toolbar:false;">body {
counter-reset: h3;
}
h3 {
counter-increment: h3;
display: list-item;
}
h3::marker {
display: list-item;
content: "✔" counter(h3) " ";
color: lightsalmon;
font-weight: bold;
}</pre>
の効果は次のとおりです。これは、シリアル番号を ::marker
要素に自動的に追加する効果を実装します。
CodePen デモ -- ::マーカーの例
https://codepen.io/chriscoyier/pen/ExNWmeeこの記事では、::マーカー
とは何か、そしてその実践的なシナリオのいくつかを紹介します。 ::after
も同様の機能を実現できますが、CSS はさらにセマンティックなタグ ::marker
を提供します。これは、全員が独自のフロントエンド コード (HTML/ CSS) セマンティクスにもっと注意してください。 さて、この記事はここで終わります。お役に立てば幸いです :)
プログラミング関連の知識について詳しくは、
プログラミング ビデオ以上が興味深い CSS3 擬似要素::マーカーを共有すると、リスト番号がより鮮明になります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。