Bộ chọn CSS ::before chèn nội dung trước phần tử được chọn. CSS :after chèn nội dung sau phần tử được chỉ định. Các bộ chọn này thường dùng để thêm văn bản trước hoặc sau đoạn văn hoặc liên kết.
Khi bạn thiết kế trang web, bạn có thể muốn thêm nội dung trước hoặc sau nội dung của phần tử xuất hiện. Ví dụ, bạn có thể muốn thêm hình ảnh trước mỗi dấu chấm (bullet point) trong danh sách.
Đó là nơi pseudo-element (phần tử giả) CSS ::before và ::after phát huy tác dụng. Các pseudo-element này cho phép bạn chèn nội dung trước hoặc sau nội dung của phần tử.
Hướng dẫn này sẽ thảo luận, tham chiếu ví dụ, cách dùng pseudo-element ::before và ::after để trang trí nội dung trên trang web. Cuối bài, bạn sẽ thành thạo dùng pseudo-element ::before và ::after trong CSS.
Pseudo-element CSS
Pseudo-element là từ khóa đặc biệt cho phép bạn định dạng một phần cụ thể của các phần tử được chọn bởi bộ chọn CSS. Chúng ta sẽ gọi pseudo-element là bộ chọn xuyên suốt bài này vì mọi pseudo-element là một bộ chọn.
Pseudo-element hữu ích khi bạn muốn áp dụng style cho phần tử mà không thêm class hoặc ID CSS cho phần tử. Ví dụ, nếu bạn muốn thêm mũi tên ">" sau mỗi liên kết trên trang web, bạn có thể dùng pseudo-element.
CSS cung cấp nhiều pseudo-element. Chúng bao gồm ::first-line, ::first-letter, ::before, và ::after. Với mục đích hướng dẫn này, chúng ta tập trung vào hai cái cuối: ::before và ::after.
Pseudo-element thường được biểu diễn dùng hai dấu hai chấm (::). Mặc dù CSS3 hỗ trợ dùng cú pháp dấu hai chấm đơn (: ) để khai báo pseudo-element, dùng ký hiệu hai dấu hai chấm là phương pháp hay.
Điều này là vì ký hiệu hai dấu hai chấm dùng để phân biệt pseudo-class với pseudo-element.
Pseudo-element CSS ::before
Pseudo-element ::before thêm nội dung xuất hiện trước phần tử trên trang web. Thường, phần tử này dùng để thêm văn bản trước đoạn văn.
Cú pháp của pseudo-element ::before là:
selector::before { // CSS rules }
Bộ chọn ::before được thêm sau tên phần tử bạn muốn áp dụng bộ chọn.
Dưới đây là các thành phần chính của pseudo-element ::before:
- selector (bộ chọn) đề cập đến bộ chọn mà ::before nên được áp dụng. Vì vậy, nếu bạn muốn áp dụng ::before cho mọi thẻ "a", bộ chọn của bạn sẽ là "a". Hoặc nếu bạn muốn áp dụng ::before trước mọi phần tử với tên class "link", bạn sẽ dùng bộ chọn ".link".
- ::before báo cho trình duyệt thêm nội dung của quy tắc CSS trước bộ chọn.
- CSS rules (quy tắc CSS) là quy tắc nên được áp dụng trước bộ chọn.
Nếu bạn quan tâm học thêm về cách bộ chọn hoạt động trong CSS, đọc hướng dẫn bộ chọn CSS của chúng tôi.
Hãy đi qua ví dụ để minh họa cách pseudo-element ::before hoạt động.
Ví dụ CSS ::before
Giả sử chúng ta muốn thêm emoji liên kết (🔗) trước mỗi liên kết trên trang web ví dụ. Chúng ta có thể hoàn thành nhiệm vụ này dùng code sau:
Code của chúng ta trả về:
Trong file HTML, chúng ta định nghĩa thẻ HTML <a> liên kết đến trang chủ Career Karma. Sau đó, trong file CSS, chúng ta dùng pseudo-element ::before thêm emoji liên kết trước mọi thẻ <a> trên trang web.
Chúng ta hoàn thành điều này bằng cách chỉ định thuộc tính content trong file CSS, trông như sau:
content: "🔗";
Quy tắc của chúng ta đã thêm emoji liên kết vào đầu thẻ <a> chúng ta tạo.
Giá trị cho thuộc tính "content" có thể là:
- Một chuỗi (string), như "This is a string.".
- Một counter (bộ đếm), như "counter(li);".
- Một hình ảnh (image), như "url(/path/to/image.png)".
- Chuỗi rỗng (blank string), như "".
Bạn không thể chèn phần tử HTML vào thuộc tính content.
Pseudo-element CSS ::after
Pseudo-element CSS ::after cho phép thêm nội dung ngay sau phần tử trên trang web. Giống như bộ chọn ::before, ::after thường dùng với liên kết hoặc đoạn văn bản.
Cú pháp của pseudo-element ::after như sau:
selector::after { // CSS rules }
Cú pháp cho ::after giống hệt cú pháp cho pseudo-element ::before. ::after chấp nhận cùng giá trị cho thuộc tính "content" mà chúng ta đã thảo luận trước.
Ví dụ CSS ::after
Giả sử chúng ta đang thiết kế phần tử liên kết trên trang web cho tiệm bánh tên Hansons Bakery. Liên kết này nên hiển thị văn bản "Go to the Hansons Bakery homepage." Liên kết nên được bao quanh bởi viền đen solid rộng 1px.
Sau nhãn của chúng ta, chúng ta muốn hộp văn bản xuất hiện với nội dung This page shows off our baked goods menu. (Chú ý khoảng trắng trước từ "This".) Hộp nên có màu nền HTML cam (orange).
Chúng ta có thể hoàn thành nhiệm vụ này dùng code sau:
index.html <a href="/" class="label">Go to the Hansons Bakery homepage.</a> styles.css .label { border: 1px solid black; } .label::after { content: " This page shows off our baked goods menu."; background-color: orange; }
Code của chúng ta tạo ra nội dung trông như sau:
Trong code, chúng ta định nghĩa liên kết đến trang chủ dùng thẻ <a>. Tên class liên kết với liên kết là .label.
Trong file CSS, chúng ta áp dụng viền đen solid rộng 1px quanh mọi phần tử với tên class .label.
Sau đó, chúng ta dùng bộ chọn ::after để tạo hộp văn bản chúng ta mô tả trước. Hộp văn bản hiển thị nội dung "This page shows off our baked goods menu." Hộp có màu nền cam.
Kết luận
Pseudo-element ::before và ::after cho phép bạn thêm nội dung vào phần cụ thể của phần tử bạn đã chọn trong quy tắc CSS. Ví dụ, bộ chọn ::before có thể dùng để thêm văn bản trước liên kết. Bộ chọn ::after có thể dùng để thêm emoji sau đoạn văn.
Hướng dẫn này đã thảo luận, tham chiếu ví dụ, cơ bản về pseudo-element trong CSS và cách dùng pseudo-element ::before và ::after. Bây giờ bạn sẵn sàng bắt đầu dùng pseudo-element ::before và ::after trong code CSS như nhà thiết kế web chuyên nghiệp.
Để lời khuyên về tài nguyên học tập, sách, và khóa học nhà phát triển web CSS hàng đầu, xem hướng dẫn "Cách học CSS" của chúng tôi.