CSS ::marker
, HTML listelerinde içeriğin yanı sıra madde işareti ve sayı stillerini değiştirmenize olanak tanır.
Sanal öğelere giriş
Sözde öğe, belgenin belge ağacında temsil edilmeyen bir bölümünü 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
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
, hedef işaretçi sözde öğelerini CSS'nizde ayrı ayrı veya genel olarak kullanmanıza olanak tanıyarak 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
'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 tüm liste öğesine nasıl uygulandığı gösterilmektedir ve ::marker
yalnızca işaretçi kutusunu hedeflemenize izin verir. 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 ya <ol>
? 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 Sayaç adı verilir. Sayıların başladığı ve bittiği yeri ayarlamak veya sıfırlamak ya da örneğin Romen rakamlarına geçirmek için kullanılan özellikler vardır. 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ı kabı, ::marker
sözde öğeye uyguladığınız stilleri incelemenize, hatalarını ayıklamanıza ve değiştirmenize yardımcı olur.
Kaynaklar
::marker
hakkında daha fazla bilgiyi şu kaynaklarda bulabilirsiniz: