CSS Pseudo elements

21/05/2019

Bài sau » « Bài trước

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::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::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

SelectorExampleExample 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>
Bài sau » « Bài trước
Back to top