CSS content属性的使用
content属性与 :before 及 :after 伪元素配合使用，用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
语法：
content:normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url| initial|inherit;
属性值：
● normal：设置默认值。如果内容属性正常，则设置内容。
Element::before|after {
content: normal;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before {
content: "Welcome ";
}
a::before {
content: normal;
}
</style>
</head>
<body>
<p id="a">you</p>
<p>you</p>
</body>
</html>输出：
Welcome you Welcome you
● none：不设置伪元素::before或::after的内容。
Element::before|after {
content: none;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before {
content: "Hello ";
}
p#a::before {
content: none;
}
</style>
</head>
<body>
<p>world！</p>
<p id="a"> world！</p>
</body>
</html>输出：
Hello world！ world！
● initial：它将属性设置为其默认值。
Element::before|after {
content: initial;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before {
content: "Welcome ";
}
a::before {
content: initial;
}
</style>
</head>
<body>
<p>world!</p>
<p id="a">you!</p>
</body>
</html>输出：
Welcome world! Welcome you!
● attr：设置包含指定值的属性值。
Element::before|after {
content:attr(href);
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
a::after {
content: attr(href);
}
</style>
</head>
<body>
<a href="https://www.0133.cn">点击这里! </a>
</body>
</html>输出：
● String：用于在HTML元素之前和之后生成任何字符串。
Element::before|after {
content: string;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 使用的字符串值 */
p::before {
content: "Hello ";
}
</style>
</head>
<body>
<p>World!</p>
</body>
</html>输出：
Hello World!
● open-quote：它在元素前后生成左引号。
Element::before|after {
content: open-quote;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>输出：
"Hello World!
● close-quote：在元素前后生成右引号。
Element::before|after {
content: close-quote;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::after {
content: close-quote;
}
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>输出：
"Hello World!"
● no-open-quote：如果指定左引号，它将从内容中删除左引号。
Element::before|after {
content: no-open-quote;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before {
content: open-quote;
}
p::before {
content: no-open-quote;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>输出：
Hello World!
● no-close-quote：如果指定右引号，它将从内容中删除右引号。
Element::before|after {
content: no-close-quote;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p::before {
content: close-quote;
}
p::before {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>输出：
Hello World!
● inherit：继承自其父元素。
Element::before|after {
content: inherit;
}浏览器支持
content属性支持的浏览器如下所示：
● Google Chrome 1.0
● Internet Explorer 8.0
● Firefox 1.0
● Safari 1.0
● Opera 4.0
以上就是CSS的content属性怎么用？的详细内容，更多请关注0133技术站其它相关文章！
