Thuộc tính content

Đị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.

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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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