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