CSS Pseudo elements
21/05/2019
Pseudo elements là gì ?
CSS pseudo elements dùng để style phần tử được xác định.
Ví dụ, nó có thể được dùng để:
- Style kí tự đầu tiên hoặc dòng đầu tiên của phần tử HTML.
- Chèn nội dung before hoặc after vào phần tử HTML.
Cú pháp
slector::pseudo-element{
property:value;
}
Ở đây sử dụng 2 dấu hai chấm (::) dùng để phân biệt với 1 dấu hai chấm (:) của psedo class. Nhưng, ta vẫn có thể sử dụng 1 dấu hai chấm (:) khi viết CSS.
::first-line pseudo elements
Thuộc tính ::first-line dùng để style css cho dòng đầu tiên của đoạn text.
Ví dụ sử dụng để style dòng đầu tiên cho thẻ <p>
p::first-line {
color: #ff0000;
text-transform: uppercase;
}
Đoạn văn bản có nhiều dòng, width: 300px. Sử dụng ::first-line để css dòng đầu tiên có màu đỏ và in hoa.
Chú ý: Thuộc tính ::first-line chỉ sử dụng cho các phần tử dạng block.
Dưới đây là danh sách các thuộc tính CSS sử dụng được trong ::first-line :
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter pseudo elements
Thuộc tính ::first-letter dùng để style css cho kí tự đầu tiên của đoạn text.
Ví dụ sử dụng để style kí tự đầu tiên cho thẻ <p>
p::first-line {
color: blue;
font-size: xx-large;
}
Đoạn văn bản có nhiều dòng, width: 300px. Sử dụng ::first-letter để css kí tự đầu tiên có màu đỏ và font size to hơn với xx-large.
Chú ý: Thuộc tính ::first-letter chỉ sử dụng cho các phần tử dạng block.
Dưới đây là danh sách các thuộc tính CSS sử dụng được trong ::first-letter :
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (chỉ sử dụng khi "float" là "none")
- text-transform
- line-height
- float
- clear
Multiple pseudo elements
Ta có thể sử dụng nhiều pseudo element kết hợp lại với nhau.
Ví dụ thẻ <p> sử dụng ::first-line và ::first-letter :
p::first-line {
color: #ff0000;
text-transform: uppercase;
}
p::first-line {
color: blue;
font-size: xx-large;
}
Đoạn văn bản có nhiều dòng, width: 300px. Sử dụng ::first-line và ::first-letter để css kí tự đầu tiên có màu xanh , font size to hơn với xx-large và dòng đầu tiên màu đỏ, in hoa.
::before pseudo elements
Thuộc tính ::before được dùng để chèn nội dung vào trước nội dung của phần tử HTML
Ví dụ dưới đây chèn hình ảnh vào trước mỗi thẻ li :
<ul>
<li>Tea</li>
<li>Coffee</li>
</ul>
ul li:before{
content: url(smile.gif);
}
- Tea
- Coffee
::after pseudo elements
Thuộc tính ::after được dùng để chèn nội dung vào sau nội dung của phần tử HTML
Ví dụ dưới đây chèn hình ảnh vào sau mỗi thẻ li :
<ul>
<li>Tea</li>
<li>Coffee</li>
</ul>
ul li:after{
content: url(smile.gif);
}
- Tea
- Coffee
Tất cả CSS Pseudo elements
Selector | Example | Example description |
---|---|---|
::after | p::after | Chèn nội dung bất kỳ vào sau nội dung của thẻ <p> |
::before | p::before | Chèn nội dung bất kỳ vào trước nội dung của thẻ <p> |
::first-letter | p::first-letter | Chọn kí tự đầu tiên của mỗi thẻ <p> |
::first-line | p::first-line | Chọn dòng đầu tiên của mỗi thẻ <p> |