Nội dung chính
Giới thiệu Pseudo Element trong CSS
Pseudo Element (có thể gọi là các phần tử giả) được sử dụng để thêm các hiệu ứng đặc biệt cho một số Selector. Bạn không cần sử dụng JavaScript hoặc bất cứ ngôn ngữ Script nào để sử dụng các hiệu ứng này. Cú pháp đơn giản của Pseudo Element trong CSS như sau:
selector:pseudo-element {property: value}
Các Class trong CSS cũng có thể được sử dụng với Pseudo Element như sau:
selector.class:pseudo-element {property: value}
Dưới đây là một số cách sử dụng phổ biến của Pseudo Element:
| Giá trị | Mô tả |
|---|---|
| :first-line | Sử dụng phần tử này để thêm Style đặc biệt cho dòng đầu tiên của đoạn văn trong một Selector |
| :first-letter | Sử dụng phần tử này để thêm Style đặc biệt cho chữ cái đầu tiên của đoạn văn trong một Selector |
| :before | Sử dụng phần tử này để chèn nội dung nào đó vào trước một phần tử |
| :after | Sử dụng phần tử này để chèn nội dung nào đó vào sau một phần tử |
:first-line Pseudo Element trong CSS
Nếu bạn cần thêm một số hiệu ứng đặc biệt nào đó cho dòng đầu tiên của đoạn văn, bạn có thể sử dụng :first-line Pseudo Element trong CSS. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class="noline"> Dòng văn bản này không co dấu gạch chân, vì thuộc tinh text-decoration là none.</p>
<p>Dòng văn bản này có dấu gạch chân theo CSS rule bên trên.
Các dòng văn bản còn lại hiển thị bình thường (không có dấu gạch chân).
Đây là ví dụ :first-line Pseduo Element để áp dụng hiệu ứng cho dòng chữ đầu tiên.</p>
</body>
</html>
Kết quả:
:first-letter Pseudo Element trong CSS
Chẳng hạn, nếu bạn muốn thay đổi kích cỡ font cho chữ cái đầu tiên trong các phần tử, bạn có thể sử dụng :first-letter trong CSS. Phần tử này sẽ áp dụng Style đặc biệt cho chữ cái đầu tiên của các phần tử trong một Selector. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class="normal"> Chữ cái đầu tiên được hiển thị bình thường và có kích cỡ là 10px.</p>
<p>Chữ cái đầu tiên được hiển thị với Size là 5em và có màu đen như CSS rule bên trên.
Các ký tự con lai trong đoàn văn bản hiện thị bình thường theo Font Size mặc định.
Ví dụ :first-letter Pseduo Element để tạo hiệu ứng cho chữ cái đầu tiên trong đoạn văn.</p>
</body>
</html>
Kết quả:
:before Pseudo Element trong CSS
Để thêm một số nội dung vào trước phần tử nào đó, bạn có thể sử dụng :before Pseudo Element trong CSS. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p:before
{
content: url(/images/css/lotus_flower.png)
}
</style>
</head>
<body>
<p> Dòng text này được đặt trước bởi một bông hoa.</p>
<p> Dòng text này được đặt trước bởi một bông hoa.</p>
<p> Dòng text này được đặt trước bởi một bông hoa.</p>
</body>
</html>
Kết quả:
:after Pseudo Element trong CSS
Sử dụng :after Pseudo Element trong CSS, bạn có thể thêm một số nội dung vào sau một phần tử nào đó trong một Selector. Ví dụ:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p:after
{
content: url(/images/css/lotus_flower.png)
}
</style>
</head>
<body>
<p> Dòng text này được theo sau bởi một bông hoa.</p>
<p> Dòng text này được theo sau bởi một bông hoa.</p>
<p> Dòng text này được theo sau bởi một bông hoa.</p>
</body>
</html>
Kết quả: