CSS ::marker ile özel madde işaretleri

Adam Argyle

Oriol Brufau

CSS ::marker, HTML listelerindeki içeriği ve bazı liste işareti ve sayı stillerini değiştirmenize olanak tanır.

Sanal öğelere giriş

Sanal öğe, belgedeki ve belge ağacında temsil edilmeyen bir bölümü temsil eder. Örneğin, söz konusu metin satırını sarmalayan bir HTML öğesi olmasa bile p::first-line sözde öğesini kullanarak bir paragrafın ilk satırını seçebilirsiniz.

Aşağıdaki HTML sırasız listesini ele alalım:

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

Bu, varsayılan stil ile aşağıdaki gibi oluşturulur:

Her <ul> öğesinin başındaki nokta, listeyi oluşturma işleminin bir parçası olarak oluşturulur ve kendi HTML öğesine sahip değildir. ::marker, bu noktayı veya sıralı liste öğesinin başındaki sayıyı temsil eden bir sözde öğedir.

İşaretçi oluşturma

::marker sözde öğe işaretçi kutusu, her liste öğesi öğesinin içinde hem gerçek içeriklerden hem de ::before sözde öğesinden önce otomatik olarak oluşturulur.

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

Liste öğeleri genellikle <li> HTML öğeleridir ancak diğer öğeleri liste öğelerine dönüştürmek için display: list-item öğesini kullanabilirsiniz.

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

İşaretçiye stil uygulama

::marker kullanıma sunulmadan önce, liste öğesi simgesini değiştirmek için list-style-type ve list-style-image kullanarak listelere stil verebiliyordunuz:

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

::marker, CSS'nizde işaretçi sözde öğelerini tek tek veya genel olarak hedeflemenize olanak tanıyarak işaretçilerin rengini, boyutunu ve aralığını değiştirme olanağı sunar:

li::marker {
  color: hotpink;
}

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

::marker, işaretçi stilleri üzerinde list-style-type'ten çok daha fazla kontrol sahibi olmanızı sağlar ancak her CSS mülküyle çalışmaz. Aşağıdaki özelliklere izin verilir:

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

list-style-type yerine content kullanarak ::marker içeriğini değiştirin. Aşağıdaki örnekte, list-style-type özelliklerinin liste öğesinin tamamı için nasıl geçerli olduğu ve ::marker'un yalnızca işaretçi kutusunu hedeflemenize nasıl olanak tanıdığı gösterilmektedir. background özelliği list-style-type ile çalışır ancak ::marker ile çalışmaz.

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

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

İşaretçinin içeriğini değiştirme

İşaretçilerinizi biçimlendirmenin bazı örnek yolları aşağıda verilmiştir.

Tüm liste öğelerini değiştirme

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

/* OR */

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

Yalnızca bir liste öğesini değiştirme

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

SVG ile işaretçileri tanımlama

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>");
}

Sıralı listeleri değiştirme

Peki <ol> ne olacak? Sıralı liste öğesindeki işaretçi, varsayılan olarak nokta veya "liste işaretçisi" değil, bir sayıdır. CSS'de bunlara sayıcı denir ve sayının başlangıç ve bitiş noktasını ayarlama veya sıfırlama ya da sayıları örneğin Roma rakamlarına geçirme özelliklerine sahiptirler. Sayaçlara stil vermek için ::marker'ü kullanabilir, hatta kendi numaralandırma sunumunuzu oluşturmak için işaretçi içerik değerini kullanabilirsiniz.

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

Hata Ayıklama

Chrome Geliştirici Araçları, ::marker sözde öğelerine uyguladığınız stilleri incelemenize, hata ayıklamanıza ve değiştirmenize yardımcı olabilir.

Kaynaklar

::marker hakkında daha fazla bilgiyi şu kaynaklarda bulabilirsiniz:

• Smashing Magazine'dan CSS Listeleri, İşaretleri ve Sayaçları
• CSS-Tricks'dan CSS sayaçları ve CSS ızgaraları ile sayma
• MDN'den CSS sayaçları kullanma