CSS ::before và ::after

Phần tử giả trong CSS là gì?

Phần tử giả CSS là một từ khóa được thêm vào bộ chọn (selector) cho phép bạn tạo kiểu cho một phần cụ thể của phần tử đã chọn. Ví dụ: ::first-line có thể được sử dụng để tạo kiểu cho dòng đầu tiên của đoạn văn, ::before có thể được sử dụng để thêm vào trước một phần tử, …

Trong CSS3, Phần tử giả được đại diện bởi ::<pseudo-element>, mặc dù cú pháp CSS2 :<pseudo-element> vẫn hoạt động trên hầu hết các trình duyệt cho các phần tử giả.

::before và ::after được sử dụng để làm gì?

Trong CSS, ::before và ::after tạo các phần tử giả tương ứng là phần tử được thêm vào trước và vào sau phần tử đã chọn.

Làm cách nào để sử dụng ::before và ::after trong trang web?

Một điều quan trọng cần ghi nhớ khi sử dụng ::before và ::after là đặt thuộc tính content trong css

selector::before{
  /* không có thuộc tính content, before và after sẽ không hoạt động */
  content: "";
}

Sau khi thêm nội dung, bạn có thể tạo kiểu cho chúng giống như bất kỳ phần tử nào khác.

Dưới đây là một số ví dụ đơn giản về cách sử dụng ::before và ::after cho trang web của bạn.

Trích dẫn

Thêm dấu ngoặc kép mở và đóng từ CSS bằng ::before và ::after. Lớp trích dẫn có thể được sử dụng trên bất kỳ phần tử nào để thêm kiểu dáng giống như trích dẫn. Mở Codepen

Gạch chân khi Rê chuột vào

CSS ::after được sử dụng để tạo chuyển động gạch chân cho các liên kết khi di chuột (kiểu phổ biến trong navlinks). Mở Codepen.

Hiện thông tin khi rê chuột vào

CSS ::after được sử dụng để tạo thông tin động hiển thị khi rê chuột vào. Mở Codepen.