Thuộc tính content được dùng với các pseudo-element ::before và ::after để chèn nội dung được tạo. Nó cho phép chèn văn bản, hình ảnh hoặc các phần tử HTML. Việc này giúp tăng tính linh hoạt cho việc tạo kiểu và bố cục mà không thay đổi cấu trúc HTML gốc.
Cú pháp:
content: normal|none|counter|attr|string|open-quote|close-quote|
no-open-quote|no-close-quote|url|initial|inherit;
Giá trị thuộc tính: Tất cả các thuộc tính được mô tả rõ ràng với ví dụ bên dưới.
normal
Giá trị thuộc tính CSS content: normal; đảm bảo không có nội dung bổ sung nào được tạo cho các pseudo-element ::before và ::after. Nó duy trì hành vi mặc định mà không cần chèn thêm.
Cú pháp:
Element::before|after {
content: normal;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content để tạo nội dung bằng pseudo-element ::before & ::after.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: normal;
}
</style>
</head>
<body>
<p>to GeeksforGeeks</p>
<p id="a">you</p>
</body>
</html>
Đầu ra:
Welcome to GeeksforGeeks
Welcome you
none
Giá trị thuộc tính CSS content: none; chỉ định rằng không có nội dung nào được tạo cho pseudo-element ::before và ::after. Điều này loại bỏ mọi nội dung đã chèn.
Cú pháp:
Element::before|after {
content: none;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content. Nội dung bên trong thẻ <p> sẽ được hiển thị động với các giá trị khác nhau.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: "Hello";
}
p#a::before {
content: none;
}
</style>
</head>
<body>
<p> GeeksforGeeks!</p>
<p id="a">Welcomes to GeeksforGeeks!</p>
</body>
</html>
Đầu ra:
Hello GeeksforGeeks!
Welcome to GeeksforGeeks!
initial
Giá trị thuộc tính CSS content: initial; đặt nội dung của pseudo-element ::before và ::after về giá trị mặc định ban đầu. Giá trị này được trình duyệt chỉ định.
Cú pháp:
Element::before|after {
content: initial;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content. Nội dung được hiển thị theo giá trị ban đầu.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: initial;
}
</style>
</head>
<body>
<p>to GeeksforGeeks</p>
<p id="a">you</p>
</body>
</html>
Đầu ra:
Hello GeeksforGeeks!
Hello Welcomes to GeeksforGeeks!
attribute
Giá trị thuộc tính CSS content: attr(attribute-name); chèn giá trị của thuộc tính HTML được chỉ định vào nội dung của pseudo-element ::before và ::after.
Cú pháp:
Element::before|after {
content:attr(href);
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content. Giá trị thuộc tính được đặt thành các giá trị được chỉ định.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
a::after {
content: attr(href);
}
</style>
</head>
<body>
<a href=
"https://www.geeksforgeeks.org/html/html-style-attribute/">
Click Here!
</a>
</body>
</html>
Đầu ra:
Click Here! https://www.geeksforgeeks.org/html/html-style-attribute/
String
Giá trị thuộc tính CSS content: "string"; chèn một chuỗi ký tự được chỉ định vào nội dung của pseudo-element ::before và ::after.
Cú pháp:
Element::before|after {
content: string;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content. Giá trị chuỗi sẽ tạo ra bất kỳ chuỗi nào trước và sau phần tử HTML.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS content Property</title>
<style>
/* String value used here */
p::before {
content: "Hello";
}
</style>
</head>
<body>
<p> GeeksforGeeks!</p>
</body>
</html>
Đầu ra:
Hello GeeksforGeeks!
open-quote
Giá trị thuộc tính CSS content: open-quote; chèn dấu ngoặc kép mở thích hợp cho ngôn ngữ hiện tại vào nội dung của pseudo-element ::before và ::after.
Cú pháp:
Element::before|after {
content: open-quote;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content, trong đó giá trị thuộc tính của content được đặt thành open-quote.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Đầu ra:
"Welcome to GeeksforGeeks!
close-quote
Giá trị thuộc tính CSS content: close-quote; chèn dấu ngoặc kép đóng thích hợp cho ngôn ngữ hiện tại vào nội dung của pseudo-element ::before và ::after.
Cú pháp:
Element::before|after {
content: close-quote;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content, trong đó giá trị thuộc tính của content được đặt thành close-quote.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Đầu ra:
"Welcome to GeeksforGeeks!"
no-open-quote:
Giá trị thuộc tính CSS content: no-open-quote; ngăn việc chèn dấu ngoặc kép mở trước nội dung được chỉ định bằng `open-quote` trong pseudo-element ::before và ::after.
Cú pháp:
Element::before|after {
content: no-open-quote;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content, trong đó giá trị thuộc tính của content được đặt thành no-open-quote.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: open-quote;
}
p::before {
content: no-open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Đầu ra:
Welcome to GeeksforGeeks!
no-close-quote
Giá trị thuộc tính CSS content: no-close-quote; ngăn việc chèn dấu ngoặc kép đóng sau nội dung được chỉ định bằng close-quote trong pseudo-element ::before và ::after.
Cú pháp:
Element::before|after {
content: no-close-quote;
}Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính content, trong đó giá trị thuộc tính của content được đặt thành no-close-quote.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Đầu ra:
"Welcome to GeeksforGeeks!
inherit
Giá trị thuộc tính CSS content: inherit; kế thừa hành vi nội dung từ phần tử cha của nó. Pseudo-element ::before và ::after tuân theo các quy tắc nội dung của phần tử cha.
Cú pháp:
Element::before|after {
content: inherit;
}Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính content được liệt kê bên dưới: