Halaman ini diterjemahkan oleh Cloud Translation API.

Butir kustom dengan CSS ::marker

Adam Argyle

Oriol Brufau

Dukungan Browser

Sumber

::marker CSS memungkinkan Anda mengubah konten dan beberapa gaya tanda peluru dan angka dalam daftar HTML.

Pengantar elemen pseudo

Elemen pseudo mewakili bagian dalam dokumen yang tidak direpresentasikan dalam hierarki dokumen. Misalnya, Anda dapat memilih baris pertama paragraf menggunakan elemen semu p::first-line, meskipun tidak ada elemen HTML yang menggabungkan baris teks tersebut.

Pertimbangkan daftar HTML yang tidak diurutkan berikut:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit
      consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

Yang dirender sebagai berikut dengan gaya visual default:

Titik di awal setiap elemen <ul> dibuat sebagai bagian dari rendering daftar, dan tidak memiliki elemen HTML-nya sendiri. ::marker adalah elemen semu yang merepresentasikan titik itu, atau angka yang diawali dengan urutan elemen daftar.

Membuat penanda

Kotak penanda elemen pseudo ::marker otomatis dibuat di dalam setiap elemen item daftar, sebelum konten yang sebenarnya dan ::before elemen semu.

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

Item daftar biasanya berupa <li> elemen HTML, tetapi Anda dapat menggunakan display: list-item untuk mengubah elemen lain menjadi item daftar.

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

Menata gaya penanda

Sebelum ::marker tersedia, Anda dapat menata gaya daftar menggunakan list-style-type dan list-style-image untuk mengubah simbol item daftar:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

::marker menambahkan kemampuan untuk mengubah warna, ukuran, dan spasi penanda dengan memungkinkan Anda menargetkan elemen pseudo penanda satu per satu atau secara global di CSS:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

::marker memberi Anda kontrol yang jauh lebih besar atas gaya penanda daripada list-style-type, tetapi tidak berfungsi dengan setiap properti CSS. Properti berikut diizinkan:

animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space

Ubah konten ::marker menggunakan content, bukan list-style-type. Tujuan contoh berikutnya menunjukkan bagaimana properti list-style-type diterapkan pada keseluruhan item daftar, dan ::marker memungkinkan Anda menargetkan hanya kotak penanda. background properti berfungsi dengan list-style-type, tetapi tidak dengan ::marker.

Gaya Daftar

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

Gaya visual daftar memengaruhi seluruh item daftar.

Gaya Marker

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

Gaya visual penanda memungkinkan Anda berfokus pada penanda.

Mengubah konten penanda

Berikut beberapa contoh cara untuk menata gaya penanda Anda.

Mengubah semua item daftar

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

Mengubah satu item daftar saja

li:last-child::marker {
  content: "😍";
}

Menentukan penanda dengan SVG

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Ubah daftar yang diurutkan

Bagaimana dengan <ol>? Penanda pada item daftar yang diurutkan adalah angka secara default, bukan titik atau "tanda peluru". Dalam CSS, ini disebut Penghitung, dan mereka memiliki properti untuk diatur atau diatur ulang di mana angka dimulai dan berakhir, atau mengubahnya menjadi, misalnya, angka Romawi. Anda dapat menggunakan ::marker untuk menata gaya penghitung, dan bahkan menggunakan nilai konten penanda untuk membuat penomoran presentasi.

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

Debug

Kabin Chrome DevTools membantu Anda memeriksa, men-debug, dan mengubah gaya yang Anda terapkan Elemen pseudo ::marker.

DevTools membuka dan menampilkan gaya dari agen pengguna dan gaya pengguna — Deskripsi gaya penanda DevTools.

Resource

Anda dapat mempelajari ::marker lebih lanjut dari: