تتيح لك CSS ::marker
تغيير المحتوى وبعض أنماط الرموز النقطية والأرقام في قوائم HTML.
مقدمة عن العناصر الزائفة
يمثّل العنصر الاصطناعي جزءًا في المستند لا يتم تمثيله في
شجرة المستند. على سبيل المثال، يمكنك اختيار السطر الأول من فقرة باستخدام
العنصر الاصطناعي p::first-line
، على الرغم من عدم توفّر عنصر HTML يلتف حول
هذا السطر من النص.
راجِع القائمة غير الترتيبية التالية بتنسيق HTML:
<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>
يتم عرضها على النحو التالي باستخدام النمط التلقائي:
يتم إنشاء النقطة في بداية كل عنصر <ul>
كجزء من عرض
القائمة، ولا يحتوي على عنصر HTML خاص به. ::marker
هو
عنصر وهمي يمثّل تلك النقطة، أو الرقم في بداية عنصر قائمة مرتبة
.
إنشاء علامة
يتم إنشاء مربّع علامة العنصر النائب ::marker
تلقائيًا داخل كل عنصر
عنصر قائمة، قبل كلّ من المحتوى الفعلي والعنصر النائب ::before
.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
عادةً ما تكون عناصر القائمة <li>
عناصر HTML، ولكن يمكنك استخدام display: list-item
لتحويل العناصر الأخرى إلى عناصر قائمة.
<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;
}
تصميم علامة
قبل توفُّر الرمز ::marker
، كان بإمكانك تصميم القوائم باستخدام
list-style-type
وlist-style-image
لتغيير رمز عنصر القائمة:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
توفّر العلامة ::marker
إمكانية تغيير لون العلامات وحجمها والمسافة بينها من خلال
السماح لك باستهداف العناصر الصورية للعلامات بشكل فردي أو عام في CSS:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
يمنحك ::marker
تحكمًا في أنماط محدّدات الموقع أكثر بكثير من list-style-type
،
ولكنه لا يعمل مع كل خاصية CSS. يُسمح بالسمات التالية:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
يمكنك تغيير محتوى ::marker
باستخدام content
وليس list-style-type
. يوضّح المثال التالي كيفية تطبيق سمات list-style-type
على list-style-type
item
العنصر بالكامل، ويسمح لك ::marker
باستهداف مربّع العلامة فقط. تعمل خاصية background
مع list-style-type
، ولكن ليس مع ::marker
.
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; }
تغيير محتوى علامة
في ما يلي بعض الأمثلة عن طرق تصميم محدّدات المواقع.
تغيير جميع عناصر القائمة
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
تغيير عنصر قائمة واحد فقط
li:last-child::marker {
content: "😍";
}
تحديد العلامات باستخدام رسومات SVG
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>");
}
تغيير القوائم المرتبة
ماذا عن <ol>
؟ العلامة على عنصر قائمة مرتبة هي رقم بشكلٍ default، وليس نقطة أو "نقطة قائمة". في CSS، تُعرف هذه العناصر باسم
العدادات،
وتتضمّن سمات لضبط أو إعادة ضبط مكان بدء الرقم وانتهائه، أو
تبديلها إلى أرقام رومانية مثلاً. يمكنك استخدام ::marker
لتنسيق العداد أيضًا، ويمكنك حتى استخدام قيمة محتوى العلامة لإنشاء عرض أعدادي خاص بك.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
تصحيح الأخطاء
يمكن أن تساعدك أدوات مطوّري البرامج في Chrome في فحص الأنماط التي تطبّقها على علامات
::marker
الزائفة وتصحيح أخطاءها وتعديلها.
الموارد
يمكنك الاطّلاع على مزيد من المعلومات حول ::marker
من خلال: