Sách tham khảo pseudo-element CSS

Pseudo-element CSS

Pseudo-element CSS được sử dụng để đặt style cho phần tử phần nhất định.

Ví dụ, nó có thể được sử dụng để:

  • Đặt style của ký tự đầu tiên hoặc dòng đầu tiên của phần tử
  • Chèn nội dung trước hoặc sau nội dung của phần tử
  • Đặt style của dấu của mục danh sách
  • Đặt style của background view của đối thoại

Bảng dưới đây hiển thị các pseudo-element khác nhau trong CSS:

Pseudo-element Ví dụ Mô tả ví dụ
::after p::after Chèn nội dung sau nội dung của phần tử được chỉ định.
::backdrop dialog::backdrop Đặt style của background view của đối thoại hoặc phần tử弹出.
::before p::before Chèn nội dung trước nội dung của phần tử được chỉ định.
::file-selector-button ::file-selector-button Chọn nút của loại <input type="file">.
::first-letter p::first-letter Chọn ký tự đầu tiên của mỗi phần tử <p>.
::first-line p::first-line Chọn dòng đầu tiên của mỗi phần tử <p>.
::grammar-error ::grammar-error Đặt style văn bản bị đánh dấu là lỗi ngữ pháp bởi trình duyệt.
::highlight() ::highlight(custom-name) Chọn tùy chỉnh nổi bật.
::marker ::marker Chọn dấu của mục danh sách.
::placeholder input::placeholder Đặt style văn bản của placeholder cho phần tử <input> hoặc <textarea>.
::selection ::selection Đặt樣 style văn bản được chọn bởi người dùng.
::spelling-error ::spelling-error Đặt樣式 văn bản bị đánh dấu là lỗi chính tả bởi trình duyệt.
::view-transition ::view-transition Chỉ lớp叠加 của sự chuyển đổi视图 trên trang, bao gồm tất cả các sự chuyển đổi视图 trên trang.
::view-transition-group ::view-transition-group Chỉ nhóm chụp nhanh sự chuyển đổi của một视图.
::view-transition-image-pair ::view-transition-image-pair Chỉ container trạng thái "cũ" và "mới" của sự chuyển đổi视图 (trước và sau chuyển đổi).
::view-transition-new ::view-transition-new Trạng thái "mới" của视图 chuyển đổi để biểu thị sự chuyển đổi của视图.
::view-transition-old ::view-transition-old Trạng thái "cũ" của视图 chuyển đổi để biểu thị sự chuyển đổi của视图.