在CSS中，content屬性通常與偽元素（如 ::before 和 ::after）一起使用，用于在元素的內(nèi)容之前或之后插入生成的內(nèi)容。這個(gè)屬性不接受常規(guī)的HTML內(nèi)容，而是接受一些特定的值，如字符串、屬性值、計(jì)數(shù)器值等。

以下是一些關(guān)于content屬性的基本用法和示例：

經(jīng)常用的的案例：

插入字符串

你可以使用content屬性插入任何字符串。

p::before {content: "Before content: ";
}p::after {content: " After content.";
}

在這個(gè)例子中，每個(gè)<p>元素之前都會(huì)插入文本"Before content: “，之后都會(huì)插入文本” After content."。

插入屬性值

你可以使用attr()函數(shù)來(lái)插入元素的屬性值。

a::after {content: " (" attr(href) ")";
}

在這個(gè)例子中，每個(gè)<a>元素之后都會(huì)插入一個(gè)括號(hào)，括號(hào)內(nèi)是該元素的href屬性值。

插入計(jì)數(shù)器值

你可以使用CSS計(jì)數(shù)器（counters）與content屬性一起，在偽元素中插入遞增的數(shù)字。

body {counter-reset: section;
}h1::before {counter-increment: section;content: "Section " counter(section) ": ";
}

在這個(gè)例子中，每當(dāng)<h1>元素出現(xiàn)時(shí)，計(jì)數(shù)器section就會(huì)遞增，并在<h1>元素之前插入文本"Section X: "，其中X是計(jì)數(shù)器的當(dāng)前值。

插入U(xiǎn)RL

雖然content屬性不能直接插入U(xiǎn)RL作為鏈接，但你可以使用JavaScript或其他方法來(lái)實(shí)現(xiàn)這一點(diǎn)。不過(guò)，你可以在content中插入U(xiǎn)RL作為純文本。

a::after {content: " (Visit " url(http://example.com) " for more information)";
}

但請(qǐng)注意，這里的url()函數(shù)在這里實(shí)際上是將URL作為字符串插入，而不是創(chuàng)建一個(gè)鏈接。瀏覽器會(huì)將整個(gè)內(nèi)容視為普通文本。

插入前后引號(hào)

使用屬性content:open-quote，和 content:close-quote屬性可以在元素的最前邊和最后邊分別插入引號(hào)

	<p class="p-2">這里是一段話<span>用span分開(kāi)可以插入單引號(hào)</span>，<span>是因?yàn)樵谠O(shè)置 open-quote的時(shí)候沒(méi)有設(shè)置 close-quote</span>，就直接有設(shè)置一個(gè) 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>

上邊的代碼是當(dāng)設(shè)置了open-quote的情況下如果不設(shè)置close-quote就進(jìn)行再次open-quote的話會(huì)插入不同于上次的引號(hào)，然后在設(shè)置close-quote的時(shí)候是閉合前一個(gè)，然后再設(shè)置close-quote會(huì)閉合第一個(gè)。

注意事項(xiàng)：

• content屬性僅與偽元素（如::before和::after）一起使用。
• content屬性不能用于替換元素的實(shí)際內(nèi)容。它只能用于在元素的內(nèi)容之前或之后插入額外的內(nèi)容。
• content屬性的值通常是靜態(tài)的，不會(huì)隨著頁(yè)面的動(dòng)態(tài)變化而更新（除非使用JavaScript或其他腳本語(yǔ)言）。

最后附上案例：

• 新使用方法案例：https://jsrun.net/fyDKp/
• 舊的使用技巧：https://jsrun.net/9XDKp