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

THÔNG BÁO LỖI