CSS ::before ו-::after: פסאודו-אלמנטים עם דוגמאות

מה ::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 הוא חובה. בלעדיו, ::before ו-::after אף פעם לא נוצרים, לא משנה כמה מאפיינים אחרים תתנו להם.

צורות דקורטיביות עם content: ""

עם content: "", הפסאודו-אלמנט הוא תיבה ריקה שאפשר לקבוע לה גודל וצבע. כברירת מחדל הוא inline, ותיבת inline מתעלמת מ-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(): tooltip

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>

tooltip שמופיע רק ב-hover בלתי נראה למשתמשי מקלדת ומסכי מגע. לכל דבר חשוב, שימו את הטקסט בעמוד, או הציגו אותו גם ב-: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: "".
• קביעת גודל לפסאודו-אלמנט inline. width ו-height לא עושים כלום עד שמגדירים display: block, inline-block או position: absolute.
• סדר שגוי עם מצב. a:hover::after עובד; a::after:hover לא.
• מיקום absolute בלי הורה ממוקם. הפסאודו-אלמנט מתיישר אז לאב קדמון רחוק כלשהו. הוסיפו position: relative לאלמנט.
• תוכן אמיתי ב-CSS. אי אפשר לבחור או להעתיק טקסט ב-content. שמרו מידע ב-HTML.