Một pseudo-element (hai dấu hai chấm ::) tạo style cho một phần cụ thể của phần tử, hoặc tạo ra nội dung không có trong HTML — mà không thêm markup.
::before và ::after — nội dung được tạo ra
css
{
: ;
}
{
: ;
}
Một pseudo-element (hai dấu hai chấm ::) tạo style cho một phần cụ thể của phần tử, hoặc tạo ra nội dung không có trong HTML — mà không thêm markup.
{
: ;
}
{
: ;
}
Thuộc tính content là bắt buộc — nếu thiếu nó, pseudo-element sẽ không render. Nội dung được tạo ra là một phần tử con ở ngay đầu (::before) hoặc cuối (::after) của phần tử.
.tooltip::after {
content: ""; /* rỗng nhưng có mặt → tạo một box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* một tam giác CSS (mũi tên tooltip) */
}
Đây là cách dùng kinh điển: vẽ mũi tên, badge, overlay, đường trang trí — giữ HTML sạch khỏi các phần tử thuần thị giác.
p::first-line { font-weight: bold; } /* dòng đầu tiên được render */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* text được tô sáng/chọn */
input::placeholder { color: gray; } /* text placeholder */
.x:hover { } /* pseudo-CLASS (trạng thái) — một dấu hai chấm */
.x::before { } /* pseudo-ELEMENT (một phần) — hai dấu hai chấm */
CSS3 giới thiệu :: để phân biệt pseudo-element với pseudo-class (trình duyệt vẫn chấp nhận một dấu hai chấm cho các loại cũ để tương thích, nhưng hãy dùng ::).
Nội dung content được tạo ra sẽ được một số screen reader đọc — đừng đặt thông tin thiết yếu chỉ trong ::before/::after (dùng nó cho trang trí), và các icon trang trí tốt nhất nên để ngoài accessibility tree.
Pseudo-element cho phép bạn thêm icon, hình trang trí (mũi tên, đường phân cách), drop cap, và counter thuần bằng CSS — không cần thêm <div> hay <span>.
Chúng giữ markup ngữ nghĩa trong khi vẫn cho phép chi tiết thị giác phong phú, và là một thành phần chủ lực của styling sạch, dễ bảo trì.