رموز نقطية مخصصة باستخدام CSS ::marker

Adam Argyle

Oriol Brufau

تتيح لك لغة 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 على list-style-typeitem العنصر بالكامل، ويسمح لك ::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 من خلال:

• قوائم CSS والعلامات والعدادات من مجلة Smashing
• العد باستخدام عدادات CSS وشبكة CSS من CSS-Tricks
• استخدام عدادات CSS من MDN