CSS ::marker ile özel madde işaretleri

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Tarayıcı Desteği

  • 86
  • 86
  • 68
  • 11.1

Kaynak

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

Madde işareti stili örnekleri. Kaynağı Görüntüle

Sözde öğelere giriş

Sözde öğe, belgenin doküman ağacında temsil edilmeyen bir kısmını temsil eder. Örneğin, söz konusu metin satırını sarmalayan bir HTML öğesi olmasa bile p::first-line yapay öğesini kullanarak bir paragrafın ilk satırını seçebilirsiniz.

Aşağıdaki sıralanmamış HTML listesini inceleyin:

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

Etiket, varsayılan stille aşağıdaki gibi oluşturulur:

Liste oluşturmanın bir parçası olarak her <ul> öğesinin başındaki nokta oluşturulur ve kendi HTML öğesine sahip değildir. ::marker, bu noktayı veya sıralı bir 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 asıl içerikten 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çinin stilini belirleme

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

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

::marker, CSS'nizde işaretçi sanal öğelerini ayrı ayrı veya genel olarak hedeflemenizi sağlayarak işaretçilerin rengini, boyutunu ve aralığını değiştirme olanağı ekler:

li::marker {
  color: hotpink;
}

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

::marker, işaretçi stilleri üzerinde list-style-type ile karşılaştırıldığında size çok daha fazla kontrol sağlar ancak her CSS özelliğiyle çalışmaz. Aşağıdaki özelliklere izin verilir:

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

::marker öğesinin içeriğini list-style-type değil content kullanarak değiştirin. Sonraki örnek, list-style-type özelliklerinin tüm liste öğesine nasıl uygulandığını gösterir ve ::marker yalnızca işaretçi kutusunu hedeflemenize olanak tanır. background özelliği, list-style-type ile çalışır ancak ::marker ile çalışmaz.

Stilleri listele
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
Liste stili, liste öğesinin tamamını etkiler.
Keçeli Kalem Stilleri
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
İşaretçi stili, işaretçiye odaklanmanızı sağlar.


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

Aşağıda işaretçilerinizin stilini belirlemek için bazı örnek yöntemler verilmiştir.

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

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

Peki ya <ol> cihazı? Sıralanmış bir liste öğesindeki işaretçi varsayılan olarak bir sayıdır. İşaretçi nokta veya "madde işareti" değildir. CSS'de bunlara Sayaçlar adı verilir ve sayının başlangıç ve bitiş yerlerini ayarlamak veya sıfırlamak ya da örneğin Romen rakamlarıyla değiştirmek için kullanabilecekleri özellikler vardır. Sayaçların stilini belirlemek için ::marker kullanabilir, hatta kendi numaralandırma sunumunuzu oluşturmak için işaretçi içeriği değerini kullanabilirsiniz.

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

Hata Ayıklama

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

Geliştirici Araçları açılıyor ve kullanıcı aracısı ile kullanıcı stillerinin stilleri gösteriliyor
İşaretçi stilleri ile ilgili Geliştirici Araçları açıklamaları.

Kaynaklar

Aşağıdaki kaynaklardan ::marker hakkında daha fazla bilgi edinebilirsiniz: