Pseudo-element ::marker CSS

Definisi dan penggunaan

CSS ::marker Pseudo-element digunakan untuk menetapkan gaya tanda markah daftar.

Pseudo-element ini sesuai untuk mana-mana elemen yang ditetapkan display: list-item.

Perhatian:Berikut properti dapat digabungkan dengan ::marker Bergabung:

• Semua properti huruf
• Semua properti animasi
• Semua properti transisi
• warna
• white-space
• content
• text-combine-upright
• unicode-bidi
• Arah

Contoh

Contoh 1

Tetapkan warna dan saiz huruf untuk semua tanda markah daftar:

::marker {
  font-size: 20px;
  warna: merah;
}

Cuba sendiri

Contoh 2

Tetapkan kandungan, warna dan saiz huruf untuk tanda markah daftar dalam senarai <ul>:

ul li::marker {
  content: "@ ";
  warna: merah jambu;
  font-size: 25px;
}

Cuba sendiri

Contoh 3

Tetapkan elemen <h2> untuk display: list-item dan tetapkan warna dan kandungan tanda markah daftar:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  warna: biru cerah;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

Cuba sendiri

Sintaksis CSS

::marker {
  penyataan css;
}

Perincian teknikal

Pendukung pelayar

Nombor dalam tabel menunjukkan versi paling awal penggunaan bahan buatan yang disokong sepenuhnya.

Halaman yang berkaitan

Panduan:Elang Pseudo-element CSS