Thuộc tính content

Đăng bởi: Admin

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.

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>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

HỌC WEB CHUẨN

p:after {
    content: ": kiến thức nhỏ cho web hiện đại.";
}

HỌC WEB CHUẨN

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

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!