thẻ ảo CSS ::before

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

CSS ::before thẻ ảo được sử dụng để chèn nội dung vào trước nội dung của yếu tố được chỉ định.

sử dụng content giá trị thuộc tính chỉ định nội dung cần 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;
• đếm: content: counter(li);
• câu trích dẫn: content: open-quote;
• giá trị thuộc tính: content: " (" attr(href) ")";

mẹo:Lưu ý, nội dung chèn vẫn nằm trong yếu tố được chỉ định. Nội dung chèn sẽ được thêm vào trước nội dung khác trong yếu tố.

sử dụng ::after chèn nội dung vào sau nội dung của một yếu 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樣式 cho nội dung chèn:

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

thử ngay

cú pháp CSS

::before {
  ký tự định nghĩa 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 thẻ ảo này.

trang liên quan

hướng dẫn:thẻ ảo CSS

tham khảo:thẻ ảo ::after