css中content属性你了解多少？
在CSS中，content属性通常与伪元素（如 ::before 和 ::after）一起使用，用于在元素的内容之前或之后插入生成的内容。这个属性不接受常规的HTML内容，而是接受一些特定的值，如字符串、属性值、计数器值等。
以下是一些关于content属性的基本用法和示例：
经常用的的案例：
插入字符串
你可以使用content属性插入任何字符串。
p::before {
content: "Before content: ";
}
p::after {
content: " After content.";
}
在这个例子中，每个<p>元素之前都会插入文本"Before content: “，之后都会插入文本” After content."。
插入属性值
你可以使用attr()函数来插入元素的属性值。
a::after {
content: " (" attr(href) ")";
}
在这个例子中，每个<a>元素之后都会插入一个括号，括号内是该元素的href属性值。
插入计数器值
你可以使用CSS计数器（counters）与content属性一起，在伪元素中插入递增的数字。
body {
counter-reset: section;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
在这个例子中，每当<h1>元素出现时，计数器section就会递增，并在<h1>元素之前插入文本"Section X: "，其中X是计数器的当前值。
插入URL
虽然content属性不能直接插入URL作为链接，但你可以使用JavaScript或其他方法来实现这一点。不过，你可以在content中插入URL作为纯文本。
a::after {
content: " (Visit " url(http://example.com) " for more information)";
}
但请注意，这里的url()函数在这里实际上是将URL作为字符串插入，而不是创建一个链接。浏览器会将整个内容视为普通文本。
插入前后引号
使用属性content:open-quote，和 content:close-quote属性可以在元素的最前边和最后边分别插入引号
<p class="p-2">
这里是一段话<span>用span分开可以插入单引号</span>，<span>是因为在设置 open-quote的时候没有设置 close-quote</span>，就直接有设置一个 open-quote
</p>
<style>
.p-2::before{
content: open-quote;
}
.p-2 span::before{
content: open-quote;
}
.p-2 span::after{
content: close-quote;
}
.p-2 span::after{
content: close-quote;
}
.p-2::after{
content: close-quote;
}
</style>
上边的代码是当设置了open-quote的情况下如果不设置close-quote就进行再次open-quote的话会插入不同于上次的引号，然后在设置close-quote的时候是闭合前一个，然后再设置close-quote会闭合第一个。
注意事项：
content属性仅与伪元素（如::before和::after）一起使用。content属性不能用于替换元素的实际内容。它只能用于在元素的内容之前或之后插入额外的内容。content属性的值通常是静态的，不会随着页面的动态变化而更新（除非使用JavaScript或其他脚本语言）。
最后附上案例：
- 新使用方法案例：https://jsrun.net/fyDKp/
- 旧的使用技巧：https://jsrun.net/9XDKp
原文地址：https://blog.csdn.net/qq_37417446/article/details/139665898
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！