Thuộc tính content
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.
content: "thêm text";
Thuộc tính content: "thêm text"; : nội dung trong dấu ngoặc sẽ được thêm vào thành phần.
<html>
<head>
<style type="text/css">
p:after {
content: ": Đây là nội dung được thêm vào.";
}
</style>
</head>
<body>
<p>content</p>
</body>
</html>
content
content: attr(alt);
Thuộc tính content: attr(alt); : nội dung của thuộc tính html (title, alt, href, ...) sẽ được thêm vào nội dung thành phần.
<html>
<head>
<style type="text/css">
p:after {
content: attr(title);
}
</style>
</head>
<body>
<p title="Nội dung title">content: </p>
</body>
</html>
content:
content: close-quote;
content: open-quote;
Thuộc tính content: close-quote; : Thêm dấu ngoặc đóng vào thành phần.
Thuộc tính content: open-quote; : Thêm dấu ngoặc mở vào thành phần.
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>
<style type="text/css">
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
</style>
</head>
<body>
<p>Thêm dấu ngoặc</p>
</body>
</html>
Thêm dấu ngoặc
content: no-close-quote;
content: no-open-quote;
Thuộc tính content: no-close-quote; : Bỏ dấu ngoặc đóng của thành phần.
Thuộc tính content: no-open-quote; : Bỏ dấu ngoặc mở của thành phần.
Hai thuộc thính no-close-quote và no-open-quote phải được dùng chung nhau, không thể thiếu một trong hai.
<html>
<head>
<style type="text/css">
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
p.noQuote:before {
content: no-open-quote;
}
p.noQuote:after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Thêm dấu ngoặc</p>
<p class="noQuote">Bỏ dấu ngoặc</p>
</body>
</html>
Thêm dấu ngoặc
Bỏ dấu ngoặc
Thuộc tính content: no-close-quote; và content: no-open-quote; thường dùng để reset lại thuộc tính content: close-quote; và content: open-quote;