انتقل إلى محتوى الدرس

Customizing List Bullets With Marker تلوين رموز القوائم بالعنصر marker

تعلم استخدام العناصر الزائفة في لغة CSS لتنسيق أجزاء محددة من النصوص وتوليد الشارات الزخرفية وعلامات الاقتباس ثنائية اللغة وتلوين رموز القوائم وتظليل القراءة دون إضافة وسوم فائضة.
2 صفوف تعليمية
لغة CSS
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في السابق كان تغيير لون نقاط القائمة أو أرقامها بمعزل عن لون النص الداخلي يضطر المطور إلى إلغاء التعداد الأصلي عبر list-style: none ثم إعادة رسمه يدوياً باستخدام li::before. أما اليوم فيستهدف العنصر الزائف li::marker صندوق الرمز أو الرقم الأصلي المولد تلقائياً لعناصر القوائم بصورة مباشرة.

يتيح لك li::marker تغيير اللون عبر color وضبط حجم الخط وسماكته أو حتى استبدال الرمز بنص مخصص مثل content: "+ " مع الحفاظ الكامل على محاذاة القائمة الأصلية ودلالتها لدى قارئات الشاشة.

الصف 2 ملاحظة هامة