:: trước / :: sau - Thủ thuật CSS

Phần tử ::beforevà ::afterphần tử giả trong CSS cho phép bạn chèn nội dung vào một trang mà không cần phải có trong HTML. Mặc dù kết quả cuối cùng không thực sự nằm trong DOM, nhưng nó xuất hiện trên trang như thể nó có và về cơ bản sẽ như thế này:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Những lý do duy nhất để sử dụng cái này thay cho cái kia là:

Bạn muốn nội dung được tạo ra trước nội dung phần tử, theo vị trí.
Các ::afternội dung cũng là “sau” trong mã nguồn theo đơn đặt hàng, vì vậy nó sẽ xác định vị trí trên đầu trang của :: trước nếu xếp chồng lên nhau một cách tự nhiên.

Lưu ý rằng nội dung vẫn nằm bên trong phần tử mà chúng được áp dụng. Kiểu đặt tên có vẻ như chúng có thể đến, bạn biết, trước hoặc sau phần tử, nhưng nó thực sự trước hoặc sau nội dung khác bên trong.

Giá trị cho nội dung có thể là:

Một chuỗi: content: "a string"; - các ký tự đặc biệt cần được mã hóa đặc biệt dưới dạng thực thể unicode. Xem trang glyphs.
Hình ảnh: content: url (/path/to/image.jpg.webp); - Hình ảnh được chèn với kích thước chính xác và không thể thay đổi kích thước. Vì những thứ như gradient thực sự là hình ảnh, một phần tử giả có thể là một gradient.
Không có gì: nội dung: “”; - Hữu ích cho việc xóa và chèn hình ảnh làm hình nền (đặt chiều rộng và chiều cao, và thậm chí có thể thay đổi kích thước với kích thước nền).
Bộ đếm: content: counter(li); - Thực sự hữu ích cho việc tạo kiểu danh sách cho đến khi: điểm đánh dấu xuất hiện.

Lưu ý rằng bạn không thể chèn HTML (ít nhất, HTML đó sẽ được hiển thị dưới dạng HTML). content: "";

: vs ::

Mọi trình duyệt hỗ trợ dấu hai chấm (: :) cú pháp CSS3 cũng chỉ hỗ trợ cú pháp (:), nhưng IE 8 chỉ hỗ trợ dấu hai chấm, vì vậy hiện tại, bạn chỉ nên sử dụng dấu hai chấm để hỗ trợ trình duyệt tốt nhất.

:: là định dạng mới hơn nhằm phân biệt nội dung giả với bộ chọn giả. Nếu bạn không cần hỗ trợ IE 8, hãy sử dụng dấu hai chấm.

Có liên quan

::dòng đầu tiên
:: chữ cái đầu tiên
Bộ chọn lớp giả

Hỗ trợ trình duyệt

Các vấn đề nhỏ:

Firefox 3.5- sẽ không cho phép định vị tuyệt đối các phần tử giả.
Trong Opera 9.2, khoảng trắng luôn được hiển thị trong phần tử giả này như thể nó là prevăn bản.
IE 8 không hỗ trợ z-index trên chúng