Định nghĩa và sử dụng
Thuộc tính content sử dụng kèm với bộ chọn :before, :after để chèn nội dung được tạo.
Cấu trúc
tag {
content: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| content | Nội dung | content: "thêm text"; | Nội dung trong dấu ngoặc sẽ được thêm vào thành phần. |
| attr(x) | content: attr(alt); | Nội dung của thuộc tính html sẽ được thêm vào nội dung thành phần. | |
| close-quote | content: close-quote; | Thêm dấu ngoặc đóng vào thành phần. | |
| open-quote | content: open-quote; | Thêm dấu ngoặc mở vào thành phần. | |
| no-close-quote | content: no-close-quote; | bỏ dấu ngoặc đóng của thành phần. | |
| no-open-quote | content: no-open-quote; | bỏ dấu ngoặc mở của thành phần. | |
| inherit | content: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Chú ý: Hai thuộc thính close-quote và open-quote phải được dùng chung nhau, không thể thiếu một trong hai.
Ví dụ
HTML viết:
<html> <head></head> <body> <p>HỌC WEB CHUẨN</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN
CSS viết:
p:after {
content: ": kiến thức nhỏ cho web hiện đại.";
}
Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN
Trình duyệt hỗ trợ
Thuộc tính content được hỗ trợ trong đa số các trình duyệt.
Trình duyệt Internet Explorer, chỉ IE8 hỗ trợ tuy nhiên đòi hỏi phải có !Doctype