Pseudo-element ::marker CSS

Definisi dan penggunaan

CSS ::marker Pseudo-element digunakan untuk menata gaya tanda daftar item.

Pseudo-element ini cocok untuk semua elemen yang diatur display: list-item.

Perhatian:Berikut properti dapat digunakan bersamaan dengan ::marker Gunakan bersamaan:

• Semua properti font
• Semua properti animasi
• Semua properti transisi
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• arah

Contoh

Contoh 1

Atur warna dan ukuran font tanda daftar item untuk semua item daftar:

::marker {
  font-size: 20px;
  color: red;
}

Coba Sendiri

Contoh 2

Atur konten, warna dan ukuran font tanda daftar item untuk daftar <ul>:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

Coba Sendiri

Contoh 3

Atur elemen <h2> menjadi display: list-item danatur warna dan konten tanda daftar item:

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

Coba Sendiri

Syntaks CSS

::marker {
  deklarasi css;
}

Detil Teknologi

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-element ini penuhnya.

Halaman yang berhubungan

Panduan:Elemen Pseudo CSS