CSS Pseudo elements

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