يتيح لك 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;
}
تكون عناصر القائمة عادةً عبارة عن عناصر HTML <li>
، ولكن يمكنك استخدام 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
على عنصر القائمة بأكمله، ويتيح لك ::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>
؟ العلامة على عنصر القائمة المرتبة هي رقم بشكل تلقائي، وليست نقطة أو "رمز نقطي". في CSS، يُطلق عليها اسم
العدّادات،
لها خصائص لضبط أو إعادة ضبط الرقم حيث يبدأ الرقم وينتهي، أو
التبديل إلى الأرقام الرومانية مثلاً. يمكنك استخدام ::marker
لتنسيق العدادات أيضًا،
وحتى استخدام قيمة محتوى العلامة لإنشاء عرض تقديمي
ترقيمي خاص بك.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
تصحيح الأخطاء
تساعدك سلسلة "أدوات مطوري البرامج في Chrome" على فحص الأنماط التي تطبّقها على
::marker
العناصر الزائفة وتصحيح أخطائها وتعديلها.
المراجع
يمكنك معرفة المزيد من المعلومات عن "::marker
" من: