CSS ::marker
, HTML listelerindeki içeriği ve bazı madde işaretleri ile sayı stillerini değiştirmenize olanak tanır.
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.
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
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.
Kaynaklar
Aşağıdaki kaynaklardan ::marker
hakkında daha fazla bilgi edinebilirsiniz: