Bài 27: Pseudo-elements trong CSS

Pseudo-Elements là gì?

Pseudo-element được sử dụng để định kiểu (style) cho một phần được chỉ định của một phần tử.
Ví dụ, nó có thể sử dụng để:

• Định dạng style cho chữ cái đầu tiên hoặc dòng đầu tiên của một phần tử.
• Chèn nội dung trước hoặc sau nội dung của một phần tử.

Cú pháp

Cú pháp của pseudo-elements:

selector::pseudo-element {
  property: value;
}

Một số Pseudo-element

::first-line

::first-line được sử dụng để thêm style CSS cho dòng đầu tiên của nội dung.
Ví dụ này định dạng dòng đầu tiên của văn bản trong tất cả các phần tử <p> :

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Các thuộc tính sau áp dụng cho ::first-line :

• Thuộc tính font
• Thuộc tính color
• Thuộc tính background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

::first-letter

::first-letter được sử dụng để thêm style CSS cho ký tự đầu tiên của nội dung.
Ví dụ này định dạng chữ cái đầu tiên của văn bản trong tất cả các phần tử <p>:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Các thuộc tính sau áp dụng cho ::first-letter :

• Thuộc tính font
• Thuộc tính color
• Thuộc tính background
• Thuộc tính margin
• Thuộc tính padding
• Thuộc tính border
• text-decoration
• vertical-align (duy nhất nếu “float” là “none”)
• text-transform
• line-height
• float
• clear

::before

::before được sử dụng để chèn một số nội dụng trước nội dung của phần tử.
Trong ví dụ này, chúng ta sẽ chèn hình mặt cười ở phía trước nội dung của phần tử h1:

h1::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

::after

::after dùng để chèn một số nội dung sau nội dung của phần tử.
Ở ví dụ này, chúng ta sẽ chèn mặt cười vào sau nội dung của phần tử h1:

h1::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

::marker

::marker dùng để chọn các điểm đánh dấu của các mục danh sách.
Ví dụ này, chúng ta sẽ tạo kiểu cho các điểm đánh dấu của các mục danh sách:

::marker {
  color: red;
  font-size: 23px;
}

::selection

::selection dùng để thiết lập style CSS cho nội dung phần tử được chọn bởi người dùng (bằng thao tác như double-click vào nội dung hay giữ chuột trái để chọn nội dung).
Các thuộc tính sau đâu có thể được áp dụng cho ::selection:color, background, cursor, và outline.
Ví dụ này, chúng ta sẽ thiết lập màu nền cho văn bản đã chọn có màu đỏ trên nền màu vàng:

::selection {
  color: red;
  background: yellow;
}

Pseudo-elements và CSS Classes

Pseudo-elements có thể được kết hợp với CSS classes:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Multiple Pseudo-elements

Một số pseudo-elements cũng có thể được kết hợp.
Trong ví dụ này, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, với kích thước phông chữ lớn xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có chữ hoa nhỏ. Phần còn lại của đoạn văn sẽ có kích thước và màu phông chữ mặc định:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Pseudo Elements trong CSS

Selector	Ví dụ	Mô tả ví dụ
::after	p::after	chèn một cái gì đó sau nội dung của mỗi phần tử p
::before	p::before	chèn một cái gì đó trước nội dung của mỗi phần tử p
::first-letter	p::first-letter	Chọn chữ cái đầu tiên của phần tử p
::first-line	p::first-line	Chọn dòng cái đầu tiên của phần tử p
::marker	::marker	Chọn điểm đánh dấu của các mục danh sách
::selection	p::selection	Chọn phần tử của phần tử được chọn bởi người dùng bằng thao tác như double-click vào nội dung hay giữ chuột trái để chọn nội dung