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

توافق المتصفّح

  • Chrome: 86
  • ‫Edge: 86
  • Firefox: 68
  • ‫Safari: 11.1

المصدر

تتيح لك 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-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 من خلال: