Trình bày cách sử dụng Pseudo-elements như ::before và ::after để tối ưu hóa DOM và giảm thiểu số lượng thẻ HTML dư thừa.

Question

Accepted Answer

Pseudo-elements cho phép tạo ra các thành phần trang trí hoặc nội dung phụ mà không cần thêm các thẻ div hoặc span vào cấu trúc DOM. Điều này giúp mã nguồn HTML sạch hơn, dễ bảo trì và cải thiện hiệu năng render.
Bản chất cơ chế:

::before và ::after tạo ra các phần tử ảo (virtual elements) nằm trong phần tử cha.
Chúng bắt buộc phải có thuộc tính content để hiển thị.
Thường được dùng cho: icon, đường kẻ trang trí, hiệu ứng hover, hoặc xử lý các thành phần UI lặp lại.

Ví dụ:
.button::after {
  content: '→';
  margin-left: 8px;
}
Lưu ý thực chiến: Không sử dụng Pseudo-elements cho các nội dung quan trọng về mặt ngữ nghĩa (Semantics) hoặc SEO, vì các công cụ tìm kiếm có thể không index nội dung nằm trong thuộc tính content.

Trình bày cách sử dụng Pseudo-elements như ::before và ::after để tối ưu hóa DOM và giảm thiểu số lượng thẻ HTML dư thừa.

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi css liên quan cùng chủ đề