Chèn nội dung sau phần tử với CSS ::after

Pseudo-element ::after trong CSS

Pseudo-element ::after (CSS3 dùng hai dấu hai chấm) cho phép **chèn nội dung sau nội dung của phần tử** mà không cần sửa HTML. Dùng chung với thuộc tính content.

Cú pháp

selector::after {
  content: "nội dung";  /* Bắt buộc */
  /* Các thuộc tính CSS khác: color, font, margin, display... */
}

Các loại giá trị content

Loại	Ví dụ	Mô tả
Chuỗi văn bản	`content: " ➤";`	Thêm text (có thể có Unicode)
Hình ảnh	`content: url("icon.png");`	Chèn ảnh (không thể resize bằng CSS)
Counter	`content: counter(item);`	Số thứ tự tự động
Attribute	`content: attr(href);`	Lấy giá trị attribute HTML
Rỗng	`content: "";`	Tạo element rỗng cho styling (clearfix, shape...)

Ví dụ cơ bản (từ bài gốc)

<!DOCTYPE html>
<html>
<head>
  <style>
    p::after {
      content: url(/images/bullet.gif);
      margin-left: 8px;
    }
  </style>
</head>
<body>
  <p>Dòng này sẽ có bullet ở cuối.</p>
  <p>Dòng này cũng sẽ có bullet ở cuối.</p>
  <p>Dòng này nữa.</p>
</body>
</html>

Ví dụ nâng cao thực tế

1. Clearfix (xóa float)

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. Tooltip chỉ bằng CSS

.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #333; color: white;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s;
}
.tooltip:hover::after {
  opacity: 1; visibility: visible;
}

3. Icon cho link ngoài

a[href^="http"]::after {
  content: " 🔗";
  font-size: 0.8em;
  vertical-align: super;
}

4. Hình dạng trang trí (CSS Shapes)

.card::after {
  content: "";
  display: block;
  width: 50px; height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  margin: 16px auto 0;
  border-radius: 2px;
}

Lưu ý quan trọng

::after tạo **pseudo-element con** của phần tử - không tồn tại trong DOM
Không thể select bằng JavaScript (querySelector không thấy)
Kế thừa các thuộc tính có thể kế thừa từ parent (color, font...)
Mặc định display: inline - thường cần đổi display: block/inline-block để style
CSS2 dùng :after (1 dấu hai chấm), CSS3 dùng ::after (2 dấu) - cả hai đều hoạt động nhưng nên dùng ::after