pseudo-element CSS ::before

Định nghĩa và cách sử dụng

CSS ::before Pseudo-element được sử dụng để chèn một số nội dung trước nội dung của phần tử được chỉ định.

Sử dụng content Thuộc tính chỉ định nội dung được chèn. Giá trị của content có thể là:

• Chuỗi: content: "Hello world!";
• Hình ảnh: content: url(myimage.jpg);
• Không có nội dung: content: none;
• Bộ đếm: content: counter(li);
• Dấu ngoặc kép: content: open-quote;
• Giá trị thuộc tính: content: " (" attr(href) ")";

Lưu ý:Lưu ý rằng nội dung được chèn vẫn nằm trong phần tử được chỉ định. Nội dung được chèn sẽ được thêm vào trước nội dung khác trong phần tử.

Sử dụng ::after Chèn một số nội dung sau nội dung của phần tử đặc định.

Mô hình

Ví dụ 1

Chèn một chuỗi vào trước nội dung của mỗi thẻ <p>:

p::before {
  content: "Đọc này: ";
}

Thử ngay

Ví dụ 2

Chèn một chuỗi vào trước nội dung của mỗi thẻ <p> và thiết lập phong cách cho nội dung được chèn:

p::before {
  content: "Đọc này -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Thử ngay

Ngữ pháp CSS

::before {
  các khai báo css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn pseudo-element này.

Trang liên quan

Hướng dẫn:pseudo-element CSS

Tham khảo:pseudo-element CSS ::after