وثائق CSS قابلة للتشغيل: ::before و::after

Q: لماذا لا يظهر ::before أو ::after عندي؟

السبب الأكثر شيوعًا غياب الخاصية content: من دونها لا يُولَّد العنصر الزائف. استخدم content: "" لصندوق زخرفي فارغ. أسباب أخرى: عنصر زائف سطري له عرض وارتفاع (أعطه display: block أو inline-block)، أو عنصر مثل أو لا يستطيع احتواءهما.

Q: ما الفرق بين :before و::before؟

لا فرق في السلوك. ::before بنقطتين مزدوجتين هي الصيغة الحالية التي تميّز العناصر الزائفة؛ و:before بنقطتين مرة واحدة هي التهجئة الأقدم من CSS2 التي ما زالت المتصفحات تقبلها لـ before وafter وfirst-line وfirst-letter.

Q: هل تقرأ قارئات الشاشة محتوى ::before في CSS؟

عمومًا نعم: النص في content يُضمَّن عادةً في الاسم الذي تقرؤه تقنيات الوصول، لكن لا يمكن تحديده أو نسخه. أبقِ المعلومات الحقيقية في HTML واستخدم العناصر الزائفة للزخرفة والإشارات البصرية الصغيرة.

ماذا يفعل ::before و::after

يُدرج ::before صندوقًا كـ أول ابن للعنصر، و::after كـ آخر ابن. ما يوضع في الصندوق تحدده الخاصية content. لا يُضاف شيء إلى HTML: المتصفح يولّده من CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

يحتوي HTML على 9 وTests pass فقط. علامة الدولار وتسمية «/ month» وعلامة الصح كلها تأتي من CSS. وترث أنماط العنصر (الخط، اللون) إلا إذا تجاوزتها، كما تفعل الأمثلة أعلاه.

الصيغة

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

قيمة `content`	النتيجة
`"text"`	سلسلة نصية. استخدم `"\A"` لسطر جديد (مع `white-space: pre`)، و`"\2192"` لمحرف Unicode (→)
`""`	صندوق فارغ، للأشكال والزخارف
`attr(data-label)`	قيمة سمة من سمات العنصر
`counter(step)`	قيمة عدّاد CSS
`open-quote` / `close-quote`	علامات التنصيص الخاصة بلغة العنصر
`none` أو `normal`	لا عنصر زائف (`normal` هي القيمة الافتراضية)

الخاصية content إلزامية. من دونها لا يُنشأ ::before ولا ::after أبدًا، مهما أعطيتهما من خصائص أخرى.

أشكال زخرفية بـ content: ""

مع content: "" يصبح العنصر الزائف صندوقًا فارغًا يمكنك تحديد حجمه ولونه. هو سطري افتراضيًا، والصندوق السطري يتجاهل width وheight، لذلك أعطه display: block أو inline-block أو position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

ضبط موضع العنصر الزائف

لزخرفة تقع فوق العنصر أو حوله، استخدم position: absolute على العنصر الزائف وposition: relative على العنصر نفسه، كي تُقاس الإزاحات من العنصر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

انتبه إلى الترتيب عند الدمج مع فئة زائفة: الحالة أولًا ثم العنصر الزائف، .link:hover::after، وليس .link::after:hover أبدًا.

قراءة السمات بـ attr(): تلميح منبثق

تسحب attr() قيمة سمة إلى content، فتستطيع قاعدة واحدة عرض نص مختلف على كل عنصر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

التلميح الذي يظهر عند التمرير فقط غير مرئي لمستخدمي لوحة المفاتيح والشاشات اللمسية. لأي شيء مهم، ضع النص في الصفحة، أو أظهره أيضًا عند :focus مع tabindex="0" على العنصر.

الترقيم بالعدّادات

تُرقّم عدّادات CSS مع ::before العناصر من دون كتابة الأرقام:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

أضف خطوة أو احذفها وستتحدث الأرقام من تلقاء نفسها.

أين لا يعمل ::before و::after

تُدرج العناصر الزائفة داخل العنصر، بين وسومه. العناصر التي ليس لها داخل يتسع لها لا تستطيع عرضها:

<img> و<video> و<iframe> (العناصر المستبدلة)
<input> و<select> و<textarea> (عناصر التحكم في النماذج)، و<br>

بعض المتصفحات ترسمها على مربع اختيار أو صورة معطوبة، لكن ذلك غير متسق. ضع العنصر الزائف على غلاف بدلًا من ذلك: <span class="field"><input></span> ونسّق .field::after.

أخطاء شائعة

غياب content. السبب الأكثر شيوعًا لعدم ظهور شيء. أضف content: "".
تحديد حجم عنصر زائف سطري. لا تفعل width وheight شيئًا حتى تضبط display: block أو inline-block أو position: absolute.
ترتيب خاطئ مع الحالة. a:hover::after يعمل؛ وa::after:hover لا يعمل.
موضع مطلق من دون أب مُموضَع. عندها يُحاذى العنصر الزائف إلى سلف بعيد. أضف position: relative إلى العنصر.
وضع محتوى حقيقي في CSS. النص في content لا يمكن تحديده أو نسخه. أبقِ المعلومات في HTML.

الأسئلة الشائعة

ماذا يفعل ::before في CSS؟

ينشئ عنصرًا زائفًا هو الابن الأول للعنصر المحدد، ويملؤه بما تحدده الخاصية content. و::after يفعل الشيء نفسه كآخر ابن. لا يوجد أي منهما في HTML، لذلك يفيدان في الأيقونات والتسميات والزخارف.

لماذا لا يظهر ::before أو ::after عندي؟

السبب الأكثر شيوعًا غياب الخاصية content: من دونها لا يُولَّد العنصر الزائف. استخدم content: "" لصندوق زخرفي فارغ. أسباب أخرى: عنصر زائف سطري له عرض وارتفاع (أعطه display: block أو inline-block)، أو عنصر مثل <img> أو <input> لا يستطيع احتواءهما.

ما الفرق بين :before و::before؟

لا فرق في السلوك. ::before بنقطتين مزدوجتين هي الصيغة الحالية التي تميّز العناصر الزائفة؛ و:before بنقطتين مرة واحدة هي التهجئة الأقدم من CSS2 التي ما زالت المتصفحات تقبلها لـ before وafter وfirst-line وfirst-letter.

هل يمكن استخدام ::before على img أو input؟

ليس بشكل موثوق. تُدرج العناصر الزائفة داخل محتوى العنصر، والعناصر المستبدلة مثل <img> وعناصر التحكم مثل <input> ليس لها صندوق محتوى لهما. أحط العنصر بـ <span> أو <div> وضع العنصر الزائف على الغلاف.

هل تقرأ قارئات الشاشة محتوى ::before في CSS؟

عمومًا نعم: النص في content يُضمَّن عادةً في الاسم الذي تقرؤه تقنيات الوصول، لكن لا يمكن تحديده أو نسخه. أبقِ المعلومات الحقيقية في HTML واستخدم العناصر الزائفة للزخرفة والإشارات البصرية الصغيرة.

مفاهيم ذات صلة