::before và ::after trong CSS

::before và ::after trong CSS (nhiều lúc thường ghi là :before và :after) là những phần tử giả (pseudo element). div, span,… chẳng hạn, là những phần tử thật tồn tại trên file HTML. CSS chủ yếu được dùng để định dạng các phần tử HTML. Tuy nhiên, trong một số trường hợp cần thiết, CSS cũng hỗ trợ chèn nội dung mà không làm ảnh hưởng đến file mã HTML. ::before và ::after được sử dụng trong tình huống đó, nên chúng được gọi là những phần tử giả.

::before được dùng để chèn nội dung vào trước nội dung đang có của phần tử. ::after được dùng để chèn nội dung vào sau nội dung đang có của phần tử. Về mặt hiển thị, chúng sẽ xuất hiện trên giao diện trang web, nhưng nếu bạn bấm view source, bạn sẽ không thấy chúng xuất hiện trên mã HTML.

::before và ::after trong CSS

Ví dụ: Giả sử bạn có phần tử HTML sau:

<p>My name is Donald</p>

Và đoạn mã CSS sau:

<style>
p::before {
   content: "Read this -";
   background-color: yellow;
   color: red;
   font-weight: bold;
}
</style>

Đoạn CSS trên có nghĩa: với mỗi phần tử p trong tài liệu, ngay trước nội dung của chúng, chèn thêm nội dung Read this - có nền màu vàng, font chữ đỏ đậm. Kết quả sẽ xuất hiện như thế này:

Read this – My name is Donal

Nếu để ý trong file CSS của Font Awesome, bạn cũng sẽ thấy tác giả dùng phần tử giả để chèn nội dung, ví dụ:

.fa-camera:before {
   content: "\f030";
}

\f030 là ký tự hình chiếc máy ảnh (camera) trong font awesome. Nhờ vậy, khi ta muốn xuất hiện icon hình máy ảnh, ta chỉ việc dùng như:

<i class="fa fa-camera"></i>

Sử dụng phần tử giả, bạn chỉ có thể chèn một số nội dung sau đây:

• Ký tự hay văn bản, ví dụ content: "Read this -"
• Hình ảnh, ví dụ: content: url(image.jpg)
• Nội dung rỗng, ví dụ: content: ""
• Bộ đếm, ví dụ: content: counter(li)

Điều đó có nghĩa trong thời điểm hiện tại, bạn không thể chèn nội dung HTML (ví dụ <p>Hello</p>) vào phần tử giả.

Trong đa số cách dùng hiện tại, bạn sẽ ít thấy dùng :: ở đầu mà thay vào đó chỉ có một dấu : (:before và :after). :: là chuẩn của CSS3 nhằm phân biệt giữa lớp giả (pseudo classes) và phần tử giả (pseudo elements). Hầu hết mọi trình duyệt hiện tại đều hỗ trợ hai cách ghi này. Tuy nhiên, IE 8 chưa hỗ trợ ::, do đó, để trang web có thể hoạt động tốt trên IE8, tạm thời bạn vẫn nên dùng :before và :after.