Thuộc tính content trong CSS

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).

HTML viết:

<html>
<head></head>
<body>
<p>HỌC TV</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

HỌC TV

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 TV: kiến thức nhỏ cho web hiện đại.

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

Bình luận