Cú pháp
Cú pháp của pseudo-elements:
selector::pseudo-element { property: value; }
::first-line Pseudo-element
::first-line pseudo-element được sử dụng để thêm một kiểu đặc biệt vào dòng đầu tiên của văn bản.
Ví dụ sau định dạng dòng đầu tiên của văn bản trong tất cả các element <p>:
p::first-line { color: #ff0000; font-variant: small-caps; }
Lưu ý: ::first-line pseudo-element chỉ có thể được áp dụng cho các element block.
Các thuộc tính sau áp dụng ::first-line pseudo-element:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter Pseudo-element
::first-letter pseudo-element được sử dụng để thêm một kiểu đặc biệt vào chữ cái đầu tiên của văn bản.
Ví dụ sau định dạng chữ cái đầu tiên của văn bản trong tất cả các element <p>:
p::first-letter { color: #ff0000; font-size: xx-large; }Lưu ý: ::first-letter pseudo-element chỉ có thể được áp dụng cho các element block.
Các thuộc tính sau áp dụng ::first-letter pseudo-element:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Pseudo-elements và HTML Classes
Pseudo-elements có thể kết hợp với HTML classes
p.intro::first-letter { color: #ff0000; font-size: 200%; }
Multiple Pseudo-elements
Một số pseudo-elements cũng có thể được kết hợp.
Trong ví dụ sau, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, với kích thước fontsize large-xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có fontsize small-caps. Phần còn lại của đoạn văn sẽ có kích thước và màu font chữ mặc định:
p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; }
::before Pseudo-element
::before Pseudo-element có thể được sử dụng để chèn một số nội dung vào trước nội dung của một element.
Ví dụ sau đây chèn một hình ảnh trước nội dung của mỗi element <h1>:
h1::before { content: url(smiley.gif); }
::after Pseudo-element
::after Pseudo-element có thể được sử dụng để chèn một số nội dung vào sau nội dung của một element.
Ví dụ sau đây chèn một hình ảnh sau nội dung của mỗi element <h1>:
h1::after { content: url(smiley.gif); }
::marker Pseudo-element
::marker pseudo-element chọn các điểm đánh dấu của các mục danh sách.
Ví dụ sau tạo kiểu cho các điểm đánh dấu của các mục danh sách:
::marker { color: red; font-size: 23px; }
::selection Pseudo-element
::selection pseudo-element khớp với phần của element được người dùng chọn.
Các thuộc tính CSS có thể được sử dụng cho ::selection: color, background, cursor, và outline.
Ví dụ sau làm cho văn bản đã chọn có màu đỏ trên nền vàng:
::selection { color: red; background: yellow; }