Pseudo-element ::after trong CSS

Giới thiệu

Pseudo-element ::after cho phép chèn nội dung sau nội dung của phần tử được chọn, mà không cần sửa đổi HTML. Đây là công cụ mạnh mẽ cho trang trí, thêm icon, clearfix, hoặc tạo hình học phức tạp.

Cú pháp cơ bản

selector::after {
  content: "nội dung chèn";
  /* các thuộc tính CSS khác */
}

Ví dụ: Thêm dấu chấm (bullet) sau mỗi đoạn văn

<!DOCTYPE html>
<html>
<head>
  <style>
    p::after {
      content: url(/images/bullet.gif);
      margin-left: 8px;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <p>Dòng này sẽ có dấu chấm sau nó.</p>
  <p>Dòng này cũng sẽ có dấu chấm.</p>
  <p>Tương tự cho dòng thứ ba.</p>
</body>
</html>

Các trường hợp sử dụng phổ biến

• Clearfix: .clearfix::after { content: ""; display: table; clear: both; }
• Tooltip: Tạo mũi tên trỏ về phần tử cha
• Icon decoration: Thêm icon FontAwesome sau link/button
• Hình học: Tạo tam giác, đường kẻ, gradient decoration
• Đánh số tự động: Kết hợp counter-increment