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.

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

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC LẬP TRÌNH</p>
</body>
</html>

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

HỌC LẬP TRÌNH

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 LẬP TRÌNH: kiến thức nhỏ cho web hiện đại.

Trình duyệt hỗ trợ

Thuộc tính content

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

Viết câu trả lời

Drop Images

0 Bình luận