Kongsi pseudo-element::marker CSS3 yang menarik, yang menjadikan nombor senarai lebih jelas

Artikel ini akan memperkenalkan kepada anda pseudo-element CSS3 ::marker yang menarik dan menarik Menggunakannya boleh menjadikan nombor senarai kami lebih menarik dan jelas. Jika anda berminat, datang dan lihat bersama saya!

Apakah itu ::penanda

elemen pseudo CSS::marker baharu daripada Elemen Pseudo CSS Tahap 3, Elemen Pseudo CSS Tahap 4 A unsur pseudo yang agak baharu disempurnakan dalam Chrome, ia telah disokong oleh penyemak imbas sejak Chrome 86. [Belajar perkongsian video: tutorial video css]

Menggunakannya, kita boleh menambah elemen pseudo pada elemen untuk menjana peluru atau nombor.

Biasanya, kami mempunyai struktur berikut:

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

Tiada gaya istimewa ditambahkan secara lalai secara kasarnya seperti ini:

Menggunakan ::marker kita boleh menukar titik kecil di hadapan nombor siri:

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

Kemudian kita boleh menukar titik kecil itu kepada apa sahaja yang kita mahu:

::penanda Beberapa batasan unsur pseudo

Pertama sekali, elemen yang boleh bertindak balas kepada ::marker hanya boleh menjadi item senarai, seperti satu dalam ul li, ol dalam li semuanya item senarai.

Sudah tentu, ini tidak bermakna tidak ada cara jika kita mahu menggunakannya pada elemen lain Selain item senarai, kita boleh menggunakan display: list-item pseudo-. elemen pada mana-mana elemen yang ditetapkan dengan ::marker .

Kedua, untuk gaya dalam elemen pseudo, tidak semua sifat gaya boleh digunakan pada masa ini:

• semua sifat fon -- Jadi. sifat fon berkaitan dengan
• color -- nilai warna
• sifat kandungan -- kandungan kandungan, serupa dengan ::before kandungan unsur pseudo, digunakan untuk mengisi kandungan nombor siri
• teks-gabung-tegak (en-AS), unicode-bidi dan sifat arah -- sesetengahnya berkaitan dengan arah penulisan dokumen

::marker Penerokaan aplikasi

Contohnya, kita sering melihat beberapa hiasan di hadapan tajuk:

Atau, kita juga boleh menggunakan ungkapan emoji:

semuanya sangat sesuai untuk paparan menggunakan ::marker Ambil perhatian bahawa anda perlu menggunakan list-item pada elemen bukan-display: list-item:

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

<🎜. >

Demo CodePen -- ::contoh penanda

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

: :marker boleh berubah secara dinamik

Menariknya,

masih boleh berubah secara dinamik Dengan menggunakan ini, anda boleh mencipta beberapa kesan tuding yang menarik. ::marker

Macam ni, kalau tak terpilih memang rasa tak puas hati, tapi kalau terpilih memang senang:

Demo CodePen -- ::contoh penanda

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

Digunakan bersama dengan kaunter

Dapat diperhatikan bahawa,

pseudo-elemen sangat serupa dengan ::marker dan ::before pseudo-elemen kesemuanya mempunyai atribut ::after. content

Dalam

, anda sebenarnya boleh melakukan beberapa operasi penambahan rentetan yang mudah. Menggunakan ini, kita boleh menggunakan pembilang CSS content dan counter-reset untuk melaksanakan operasi menambah nombor siri pada elemen counter-increment. ::marker

Jika anda tidak tahu banyak tentang

, anda boleh pergi ke sini: MDN -- kenaikan balascounter-increment

Andaikan kita mempunyai HTML berikut:

<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>

Kami menggunakan

dan pembilang CSS ::marker melaksanakan senarai tertib dengan pengiraan automatik dan ungkapan emoji di hadapan counter-increment: h3

body {
  counter-reset: h3;
}

h3 {
  counter-increment: h3;
  display: list-item;
}

h3::marker {
  display: list-item;
  content: "✔" counter(h3) " ";
  color: lightsalmon;
  font-weight: bold;
}

Kesannya adalah seperti berikut, merealisasikan urutan penambahan automatik nombor kepada elemen

Kesannya: ::marker

Demo CodePen -- ::contoh penanda

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

Akhirnya

Artikel ini memperkenalkan apa itu ::marker dan beberapa senario praktikalnya Ia dapat dilihat bahawa walaupun ::before dan ::after juga boleh mencapai fungsi yang serupa, CSS masih menyediakan. Penggunaan teg yang lebih semantik ::marker juga menunjukkan bahawa setiap orang perlu memberi lebih perhatian kepada semantik kod bahagian hadapan mereka (HTML/CSS).

Baiklah, itu sahaja penghujung artikel ini, saya harap ia dapat membantu anda :)

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Kongsi pseudo-element::marker CSS3 yang menarik, yang menjadikan nombor senarai lebih jelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!