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: