Phần tử giả CSS

Tìm hiểu kiến thức cơ bản về CSS Pseudo Elements

Phần tử giả được sử dụng để tạo kiểu cho một phần cụ thể của phần tử.

Chúng bắt đầu bằng dấu hai chấm kép::.

Đôi khi bạn sẽ phát hiện ra chúng trong tự nhiên với một dấu hai chấm, nhưng đây chỉ là một cú pháp được hỗ trợ vì lý do tương thích ngược. Bạn nên sử dụng 2 dấu hai chấm để phân biệt chúng với các lớp giả.

::before::aftercó lẽ là phần tử giả được sử dụng nhiều nhất. Chúng được sử dụng để thêm nội dung vào trước hoặc sau một phần tử, chẳng hạn như biểu tượng.

Đây là danh sách các phần tử giả:

Yếu tố giả Mục tiêu
::after tạo một phần tử giả sau phần tử
::before tạo một phần tử giả trước phần tử
::first-letter có thể được sử dụng để định kiểu chữ cái đầu tiên của một khối văn bản
::first-line có thể được sử dụng để tạo kiểu cho dòng đầu tiên của một khối văn bản
::selection nhắm mục tiêu văn bản do người dùng chọn

Hãy làm một ví dụ. Giả sử bạn muốn làm cho dòng đầu tiên của đoạn văn có kích thước phông chữ lớn hơn một chút, một điều phổ biến trong kiểu chữ:

p::first-line {
  font-size: 2rem;
}

Hoặc có thể bạn muốn chữ cái đầu tiên đậm hơn:

p::first-letter {
  font-weight: bolder;
}

::after::beforehơi kém trực quan hơn. Tôi nhớ đã sử dụng chúng khi phải thêm các biểu tượng bằng CSS.

Bạn chỉ địnhcontentthuộc tính để chèn bất kỳ loại nội dung nào sau hoặc trước một phần tử:

p::before {
  content: url(/myimage.png);
}

.myElement::before { content: “Hey Hey!”; }

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: