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

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

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

插入字符串

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

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

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

插入屬性值

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

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

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

插入計數(shù)器值

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

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

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

插入URL

雖然content屬性不能直接插入URL作為鏈接，但你可以使用JavaScript或其他方法來實現(xiàn)這一點。不過，你可以在content中插入URL作為純文本。

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

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

插入前后引號

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

	<p class="p-2">這里是一段話<span>用span分開可以插入單引號</span>，<span>是因為在設(shè)置 open-quote的時候沒有設(shè)置 close-quote</span>，就直接有設(shè)置一個 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就進行再次open-quote的話會插入不同于上次的引號，然后在設(shè)置close-quote的時候是閉合前一個，然后再設(shè)置close-quote會閉合第一個。

注意事項：

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

最后附上案例：

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