::before và ::after trong CSS: pseudo-element kèm ví dụ

::before và ::after làm gì

::before chèn một hộp làm con đầu tiên của phần tử và ::after chèn làm con cuối cùng. Nội dung trong hộp do thuộc tính content quyết định. HTML không thêm gì cả: trình duyệt tạo ra hộp này từ 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 chỉ chứa 9 và Tests pass. Ký hiệu đô la, nhãn "/ month" và dấu tích đều đến từ CSS. Chúng kế thừa style của phần tử (font, màu) trừ khi bạn ghi đè, như các ví dụ trên.

Cú pháp

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

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

content là bắt buộc. Không có nó, ::before và ::after không bao giờ được tạo ra, dù bạn đặt bao nhiêu thuộc tính khác.

Hình trang trí với content: ""

Với content: "", pseudo-element là một hộp rỗng mà bạn có thể đặt kích thước và tô màu. Mặc định nó là inline, mà hộp inline bỏ qua width và height, nên hãy đặt display: block, inline-block hoặc 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>

Định vị pseudo-element

Với phần trang trí nằm đè lên hoặc bao quanh phần tử, hãy dùng position: absolute cho pseudo-element và position: relative cho chính phần tử, để các khoảng lệch được tính từ phần tử đó:

<!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>

Chú ý thứ tự khi kết hợp với pseudo-class: trạng thái đứng trước, rồi mới đến pseudo-element, .link:hover::after, không bao giờ là .link::after:hover.

Đọc thuộc tính bằng attr(): tooltip

attr() lấy giá trị của một thuộc tính đưa vào content, nên chỉ một quy tắc có thể hiện chữ khác nhau trên từng phần tử:

<!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 chỉ hiện khi hover sẽ vô hình với người dùng bàn phím và màn hình cảm ứng. Với nội dung quan trọng, hãy đặt chữ ngay trên trang, hoặc hiện thêm khi :focus với tabindex="0" trên phần tử.

Đánh số bằng bộ đếm

Bộ đếm CSS (counter) và ::before đánh số mà không cần gõ tay các con số:

<!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>

Thêm hoặc bớt một bước, các con số tự cập nhật.

Chỗ ::before và ::after không hoạt động

Pseudo-element được chèn vào bên trong phần tử, giữa thẻ mở và thẻ đóng. Phần tử nào không có phần bên trong thì không hiển thị được chúng:

• <img>, <video>, <iframe> (phần tử thay thế)
• <input>, <select>, <textarea> (điều khiển form) và <br>

Một số trình duyệt vẽ chúng trên checkbox hoặc ảnh lỗi, nhưng không nhất quán. Hãy đặt pseudo-element lên phần tử bọc: <span class="field"><input></span> rồi định dạng .field::after.

Lỗi thường gặp

• Không có content. Lý do phổ biến nhất khiến không có gì hiện ra. Hãy thêm content: "".
• Đặt kích thước cho pseudo-element inline. width và height không có tác dụng cho đến khi bạn đặt display: block, inline-block hoặc position: absolute.
• Sai thứ tự với trạng thái. a:hover::after hoạt động; a::after:hover thì không.
• Định vị tuyệt đối mà cha không được định vị. Khi đó pseudo-element căn theo một phần tử tổ tiên ở xa nào đó. Hãy thêm position: relative cho phần tử.
• Đặt nội dung thật trong CSS. Chữ trong content không thể chọn hay sao chép. Hãy giữ thông tin trong HTML.