8.1 Các loại Pseudo-elements
Pseudo-elements trong CSS cho phép bạn tạo kiểu cho các phần tử cụ thể, chẳng hạn như chữ cái đầu tiên, dòng đầu tiên hoặc thêm nội dung trước hoặc sau phần tử. Chúng cung cấp khả năng tạo kiểu bổ sung mà không cần thay đổi cấu trúc HTML. Pseudo-elements được biểu thị bằng hai dấu hai chấm (::).
Các pseudo-elements chính:
::before::after::first-letter::first-line
8.2 Pseudo-element ::before
Pseudo-element ::before thêm nội dung trước nội dung của phần tử. Nó thường được sử dụng để thêm các phần tử trang trí, biểu tượng hoặc văn bản bổ sung.
Cú pháp:
selector::before {
content: "" | "văn bản" | url() | counter | attr();
thuộc tính: giá trị;
}
Ở trường content thêm mã html cần được thêm vào.
/* Thêm mũi tên trước mỗi phần tử trong danh sách */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Phần tử danh sách đầu tiên</li>
<li>Phần tử danh sách thứ hai</li>
<li>Phần tử danh sách thứ ba</li>
</ul>
8.3 Pseudo-element ::after
Pseudo-element ::after thêm nội dung sau nội dung của phần tử. Nó thường được sử dụng để thêm các phần tử trang trí, biểu tượng hoặc văn bản bổ sung.
Cú pháp:
selector::after {
content: "" | "văn bản" | url() | counter | attr();
thuộc tính: giá trị;
}
Ở trường content thêm mã html cần được thêm vào.
/* Thêm dấu chấm sau mỗi phần tử trong danh sách */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Phần tử danh sách đầu tiên</li>
<li>Phần tử danh sách thứ hai</li>
<li>Phần tử danh sách thứ ba</li>
</ul>
8.4 Pseudo-element ::first-letter
Pseudo-element ::first-letter áp dụng cho chữ cái đầu tiên của phần tử. Nó thường được sử dụng để tạo chữ cái đầu trang trí trong đoạn văn.
Cú pháp:
selector::first-letter {
content: "" | "văn bản" | url() | counter | attr();
thuộc tính: giá trị;
}
Ví dụ:
/* Tăng kích thước và thay đổi màu sắc chữ cái đầu tiên của mỗi đoạn văn */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Đây là ví dụ về văn bản trong đoạn văn.</p>
<p>Một ví dụ khác về văn bản trong đoạn văn.</p>
8.5 Pseudo-element ::first-line
Pseudo-element ::first-line áp dụng cho dòng đầu tiên của phần tử. Nó thường được sử dụng để tạo kiểu cho dòng đầu tiên của đoạn văn.
Cú pháp:
selector::first-line {
content: "" | "văn bản" | url() | counter | attr();
thuộc tính: giá trị;
}
Ví dụ:
/* Thay đổi màu sắc và làm đậm dòng đầu tiên của mỗi đoạn văn */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Đây là một ví dụ về văn bản trong đoạn văn, chứa đủ văn bản để chia thành nhiều dòng, minh họa cách hoạt động của pseudo-element ::first-line. Dòng đầu tiên của mỗi đoạn văn sẽ được in đậm và có màu navy để thu hút sự chú ý của người đọc. Hiệu ứng này được thực hiện thông qua quy tắc CSS mà chúng ta đã xác định ở trên.
</p>
<p>
Lưu ý rằng kiểu chỉ áp dụng cho dòng đầu tiên, bất kể độ dài của nó. Văn bản còn lại trong đoạn giữ nguyên kiểu ban đầu của nó. Điều này có thể hữu ích để nhấn mạnh những điểm quan trọng hoặc tạo nhịp điệu trực quan trong văn bản.
</p>
GO TO FULL VERSION