Bộ chọn CSS ::Before chèn nội dung vào trước phần tử được chọn. CSS :after chèn nội dung sau một phần tử được chỉ định. Những bộ chọn này thường được sử dụng để thêm văn bản vào trước hoặc sau một đoạn văn hoặc một liên kết.
Khi bạn đang thiết kế một trang web, bạn có thể muốn thêm nội dung vào trước hoặc sau khi nội dung của một 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 đầu dòng trong danh sách.
Đó là nơi các phần tử giả ::trước và ::after phát huy tác dụng. Các phần tử giả này cho phép bạn chèn nội dung trước hoặc sau nội dung của một phần tử.
Hướng dẫn này sẽ thảo luận, với sự tham khảo các ví dụ, cách sử dụng các phần tử giả ::trước và ::after để trang trí nội dung trên trang web. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia trong việc sử dụng các phần tử giả ::trước và ::after trong CSS.
Phần tử giả CSS
Phần tử giả là một từ khóa đặc biệt cho phép bạn định kiểu 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ẽ coi các phần tử giả là bộ chọn trong suốt bài viết này vì mọi phần tử giả đều là một bộ chọn.
Các phần tử giả rất hữu ích khi bạn muốn áp dụng một kiểu cho một phần tử mà không cần thêm bất kỳ lớp CSS hoặc ID nào vào 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ể sử dụng phần tử giả.
CSS cung cấp nhiều loại phần tử giả. Chúng bao gồm ::first-line, ::first-letter, ::Before và ::after. Vì mục đích của hướng dẫn này, chúng ta sẽ tập trung vào hai phần cuối:::trước và ::sau.
Các phần tử giả thường được biểu diễn bằng dấu hai chấm kép (::). Mặc dù CSS3 hỗ trợ sử dụng cú pháp dấu hai chấm đơn (:) để khai báo phần tử giả, nhưng cách tốt nhất là sử dụng ký hiệu hai dấu hai chấm.
Điều này là do ký hiệu hai dấu hai chấm được sử dụng để phân biệt các lớp giả với các phần tử giả.
CSS ::trước phần tử giả
Phần tử giả ::Before thêm nội dung xuất hiện trước một phần tử trên trang web. Thông thường, phần tử này được sử dụng để thêm văn bản trước một đoạn văn.
Cú pháp của phần tử giả ::Before là:
selector::before {
// CSS rules
}
Bộ chọn ::trước được thêm vào sau tên của thành phần mà bạn muốn áp dụng bộ chọn.
Dưới đây là các thành phần chính của phần tử giả ::Before:
- bộ chọn đề cập đến bộ chọn mà ::trước nên được áp dụng. Vì vậy, nếu bạn muốn áp dụng phần tử ::trước 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 phần tử ::Before trước mỗi phần tử có tên lớp là “link”, bạn sẽ sử dụng bộ chọn “.link”.
- ::trước yêu cầu trình duyệt thêm nội dung của các quy tắc CSS trước bộ chọn.
- Quy tắc CSS là những quy tắc cần được áp dụng trước bộ chọn.
Nếu bạn muốn tìm hiểu thêm về cách hoạt động của bộ chọn trong CSS, hãy đọc hướng dẫn của chúng tôi về bộ chọn CSS.
Hãy cùng xem một ví dụ để minh họa cách hoạt động của phần tử giả ::Before.
::trước ví dụ CSS
Giả sử chúng ta muốn thêm biểu tượng cảm xúc liên kết (🔗) trước mỗi liên kết trên một trang web mẫu. Chúng ta có thể hoàn thành nhiệm vụ này bằng cách sử dụng đoạn mã sau:
Mã của chúng tôi trả về:
Trong tệp HTML của chúng tôi, chúng tôi đã xác định thẻ HTML liên kết đến trang chủ Career Karma. Sau đó, trong tệp CSS, chúng tôi đã sử dụng phần tử giả ::Before để thêm biểu tượng cảm xúc liên kết trước mỗi thẻ trên trang web của mình.
Chúng tôi đã thực hiện điều này bằng cách chỉ định thuộc tính nội dung trong tệp CSS của mình, tệp này trông giống như sau:
nội dung:“🔗”;
Quy tắc của chúng tôi đã thêm biểu tượng cảm xúc liên kết vào đầu thẻ mà chúng tôi đã tạo.
Giá trị cho thuộc tính “nội dung” có thể là:
- Một chuỗi, chẳng hạn như “Đây là một chuỗi.”.
- Bộ đếm, chẳng hạn như “bộ đếm(li);”.
- Một hình ảnh, chẳng hạn như “url(/path/to/image.png)”.
- Một chuỗi trống, chẳng hạn như “”.
Bạn không thể chèn phần tử HTML vào thuộc tính nội dung.
CSS ::sau phần tử giả
Phần tử giả CSS ::after cho phép thêm nội dung ngay sau một phần tử trên trang web. Giống như bộ chọn ::trước, ::after thường được sử dụng với các liên kết hoặc đoạn văn bản.
Cú pháp của phần tử giả ::after như sau:
selector::after {
// CSS rules
}
Cú pháp của ::after giống với cú pháp của phần tử giả ::Before. ::after chấp nhận các giá trị tương tự cho thuộc tính “nội dung” mà chúng ta đã thảo luận trước đó.
::sau ví dụ CSS
Giả sử chúng ta đang thiết kế một phần tử liên kết trên một trang web của một tiệm bánh tên là Hansons Bakery. Liên kết này sẽ hiển thị dòng chữ “Truy cập trang chủ của Hansons Bakery.” Liên kết của chúng ta phải được bao quanh bởi một đường viền màu đen liền nét rộng 1px.
"Nghề nghiệp đã bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi tham gia chương trình đào tạo. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với các giá trị và mục tiêu trong cuộc sống của mình!"
Venus, Kỹ sư phần mềm tại Rockbot
Tìm trận đấu Bootcamp của bạn
Sau nhãn của chúng tôi, chúng tôi muốn một hộp văn bản xuất hiện cùng với nội dung Trang này hiển thị menu đồ nướng của chúng tôi. (Chú ý khoảng trắng trước từ “This”.) Hộp của chúng ta phải có màu nền HTML màu cam.
Chúng ta có thể hoàn thành nhiệm vụ này bằng cách sử dụng đoạn mã 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;
}
Mã của chúng tôi đã tạo ra nội dung trông như thế này:
Trong mã của chúng tôi, chúng tôi đã xác định một liên kết đến trang chủ của mình bằng thẻ . Tên lớp được liên kết với liên kết của chúng tôi là .label .
Trong tệp CSS của chúng tôi, chúng tôi đã áp dụng đường viền màu đen liền khối rộng 1px xung quanh mọi phần tử có tên lớp .label .
Sau đó, chúng ta sử dụng bộ chọn ::after để tạo hộp văn bản mà chúng ta đã mô tả trước đó. Ô chữ hiển thị nội dung “Trang này giới thiệu thực đơn đồ nướng của chúng tôi.” Hộp của chúng ta có nền màu cam.
Kết luận
Các phần tử giả ::trước và ::after cho phép bạn thêm nội dung vào một phần cụ thể của phần tử mà bạn đã chọn trong quy tắc CSS. Ví dụ:bộ chọn ::Before có thể được sử dụng để thêm văn bản trước một liên kết. Bộ chọn ::after có thể được sử dụng để thêm biểu tượng cảm xúc sau một đoạn văn bản.
Hướng dẫn này thảo luận, với sự tham khảo các ví dụ, những kiến thức cơ bản về phần tử giả trong CSS và cách sử dụng phần tử giả ::trước và ::after. Bây giờ bạn đã sẵn sàng bắt đầu sử dụng các phần tử giả ::trước và ::after trong mã CSS của mình như một nhà thiết kế web chuyên nghiệp.
Để được tư vấn về các tài nguyên học tập, sách và khóa học hàng đầu dành cho nhà phát triển web CSS, hãy xem hướng dẫn Cách học CSS của chúng tôi.