رموز نقطية مخصصة باستخدام 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;
}

تتألف عناصر القائمة عادةً من <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 على الكل عنصر القائمة، ويتيح لك الخيار ::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