رموز نقطية مخصصة باستخدام 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 على عنصر القائمة بأكمله، ويتيح لك ::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" من:

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