CSS ::marker ile özel madde işaretleri

Adam Argyle

Oriol Brufau

CSS ::marker sayesinde şunları yapabilirsiniz: HTML listelerinde madde işareti ve numaranın içeriğini ve bazı stillerini değiştirebilirsiniz.

Sözde öğelere giriş

Sözde öğe, dokümanın herhangi bir bölümünde belge ağacını tıklayın. Örneğin, bir paragrafın ilk satırını aşağıdakileri kullanarak seçebilirsiniz: sarmalayan HTML öğesi olmasa bile p::first-line yapay öğesi görünür.

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>

Varsayılan stille 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ştur

::marker sözde öğe işaretçi kutusu, her bir liste öğesi öğesi; hem gerçek içeriklerden hem de ::before sözde öğedir.

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

Liste öğeleri genellikle <li> HTML öğelerinden oluşur, ancak display: list-item kullanabilirsiniz kullanarak diğer öğeleri liste öğelerine dönüştürebilirsiniz.

<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, işaretçilerin rengini, boyutunu ve aralığını CSS'nizde işaretçi sözde öğelerini tek tek veya genel olarak hedeflemenizi sağlar:

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

::marker içeriğini list-style-type kullanarak değil, content kullanarak değiştirin. İlgili içeriği oluşturmak için kullanılan sonraki örnek, list-style-type özelliklerinin bütüne nasıl uygulandığını gösterir liste öğesidir ve ::marker yalnızca işaretçi kutusunu hedeflemenize olanak sağlar. 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çi 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 ya <ol>? Sıralı bir liste öğesindeki işaretçi, bir nokta veya "madde işareti" değil, varsayılan olarak ayarlanır. CSS'de bunlara Sayaçlar ve sayının başladığı veya bittiği yeri ayarlama veya sıfırlama özellikleri vardır ya da Örneğin, Roma rakamlarına dönüştürebilirsiniz. Stil oluşturmak için ::marker öğesini kullanabilirsiniz oluşturabilir, hatta kendi numaralandırmanızı oluşturmak için işaretçi içerik değerini kullanabilir en iyi uygulamaları paylaşacağız.

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

Hata Ayıklama

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

Kaynaklar

::marker hakkında daha fazla bilgiyi şu kaynaklardan edinebilirsiniz:

• CSS Listeleri, İşaretçiler ve Sayaçlar Smashing Magazine'den
• CSS Sayaçları ve CSS Izgarasıyla Sayma CSS Püf Noktaları bölümünden
• CSS Sayaçlarını Kullanma MDN'den