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ì.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ