content

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

content CSS 屬性將內容替換為生成的值。它可以用來定義元素或偽元素內部渲染的內容。對於元素，content 屬性指定元素是正常渲染（normal 或 none）還是被影像（以及相關的“替代”文字）替換。對於偽元素和頁邊距框，content 定義了內容為影像、文字、兩者都有或沒有，這決定了元素是否渲染。

使用 content 屬性插入的物件是匿名的替換元素。

試一試

.topic-games::before {
  content: "🎮 " / "games";
}

.topic-weather::before {
  content: "⛅ " / "cloudy";
}

.topic-hot::before {
  content: url("/shared-assets/images/examples/fire.png") / "On fire";
  margin-right: 6px;
}

<p class="topic-games">Game News: A new inFamous is not planned</p>

<p class="topic-weather">
  Weather for Today: Heat, violent storms and twisters
</p>

<p class="topic-hot">Trending Article: Must-watch videos of the week</p>

語法

css

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";

/* <string> value */
content: "unparsed text";

/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/* attr() value linked to the HTML attribute value */
content: attr(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

/* Global values */
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;

值

其值可以是：

兩個關鍵字之一：none 或 normal。normal 是預設屬性值。
替換 DOM 節點時的 <content-replacement>。<content-replacement> 總是 <image>。
替換偽元素和頁邊距框時的 <content-list>。<content-list> 是一個或多個按指定順序出現的匿名內聯盒的列表。每個 <content-list> 項的型別為 <string>、<image>、<counter>、<quote>、<target> 或 <leader()>。
一個可選的 <string> 或 <counter> 替代文字值，前面有一個斜槓（/）。

上面提到的關鍵字和資料型別將在下面更詳細地描述。

none

當應用於偽元素時，該偽元素不會被生成。當應用於元素時，該值沒有效果。

normal

對於 ::before 和 ::after 偽元素，此值的計算結果為 none。對於其他偽元素，如 ::marker、::placeholder 或 ::file-selector-button，它會生成元素的初始（或正常）內容。對於常規元素或頁邊距框，它的計算結果為元素的後代。這是預設值。

<string>

由匹配的單引號或雙引號括起來的字元序列。多個字串值將被連線（CSS 中沒有連線運算子）。

<image>

一個 <image>，表示要顯示的影像。這可以等於 <url>、image-set() 或 <gradient> 資料型別，或者網頁本身的一部分，由 element() 函式定義。

<counter>

<counter> 值是一個 CSS 計數器，通常是由 <counter-reset> 和 <counter-increment> 屬性定義的計算產生的數字。它可以使用 counter() 或 counters() 函式來顯示。

counter(): counter() 函式有兩種形式：'counter(name)' 或 'counter(name, style)'。生成的文字是在給定偽元素作用域內具有給定名稱的最內層計數器的值。它以指定的 <list-style-type>（預設為 decimal）進行格式化。
counters(): counters() 函式也有兩種形式：'counters(name, string)' 或 'counters(name, string, style)'。生成的文字是在給定偽元素作用域內所有具有給定名稱的計數器的值，從最外層到最內層，由指定的字串分隔。計數器以指定的 <list-style-type>（預設為 decimal）進行渲染。

<quote>

<quote> 資料型別包括依賴於語言和位置的關鍵字。

open-quote 和 close-quote: 這些值被 quotes 屬性中適當的字串替換。
no-open-quote 和 no-close-quote: 不引入內容，但增加（或減少）引用的巢狀級別。

<target>

<target> 資料型別包括三個目標函式，<target-counter()>、<target-counters()> 和 <target-text()>，它們建立從連結的目標端獲得的交叉引用。請參閱正式語法。

<leader()>

<leader()> 資料型別包含一個引導符函式：leader( <leader-type> )。該函式接受關鍵字值 dotted、solid 或 space（分別等於 leader(".")、leader("_") 和 leader(" ")），或一個 <string> 作為引數。當被支援並用作 content 的值時，提供的引導符型別將作為重複模式插入，以在水平線上直觀地連線內容。

attr(x)

CSS 函式 attr(x) 檢索所選元素或偽元素的源元素的屬性值。元素屬性 x 的值是表示該屬性名稱的未解析字串。如果沒有屬性 x，則返回一個空字串。屬性名稱引數的大小寫敏感性取決於文件語言。

替代文字：/ <string> | <counter>

可以為影像或任何 <content-list> 項指定替代文字，方法是在其後附加一個正斜槓，然後是一個文字字串或一個計數器。替代文字旨在供螢幕閱讀器進行語音輸出，但也可能在某些瀏覽器中顯示。/ <string> 或 / <counter> 資料型別指定了元素的“alt 文字”。

正式定義

初始值	`normal`
應用於	所有元素、遵循樹結構的偽元素和頁邊距框
繼承性	否
計算值	在元素上，始終計算為 `normal`。在 `::before` 和 `::after` 上，如果指定了 `normal`，則計算為 `none`。否則，對於 URI 值，為絕對 URI；對於 `attr()` 值，為結果字串；對於其他關鍵字，按指定值計算。
動畫型別	離散

正式語法

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

<content-list> = 
  [ <string> | <image> | <attr()> | contents | <quote> | <leader()> | <target> | <string()> | <content()> | <counter> ]+  

<counter> = 
  <counter()>   |
  <counters()>  

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<element()> = 
  element( <id-selector> )  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<quote> = 
  open-quote      |
  close-quote     |
  no-open-quote   |
  no-close-quote  

<leader()> = 
  leader( <leader-type> )  

<target> = 
  <target-counter()>   |
  <target-counters()>  |
  <target-text()>      

<string()> = 
  string( <custom-ident> , [ first | start | last | first-except ]? )  

<content()> = 
  content( [ text | before | after | first-letter | marker ]? )  

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<attr-name> = 
  [ <ident-token>? '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  raw-string        |
  number            |
  <attr-unit>       

<id-selector> = 
  <hash-token>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<leader-type> = 
  dotted    |
  solid     |
  space     |
  <string>  

<target-counter()> = 
  target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )  

<target-counters()> = 
  target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )  

<target-text()> = 
  target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function

無障礙

CSS 生成的內容不包含在 DOM 中。因此，它不會在無障礙樹中表示，某些輔助技術/瀏覽器組合將不會播報它。如果內容傳達了對於理解頁面目的至關重要的資訊，最好將其包含在主文件中。

如果插入的內容不是裝飾性的，請檢查資訊是否提供給了輔助技術，並且在關閉 CSS 時也可用。

示例

前五個示例在偽元素上建立生成的內容。後三個是元素替換的示例。

根據元素的類附加字串

此示例在具有特定類名的元素文字後插入生成的文字。該文字為紅色。

HTML

html

<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>

CSS

css

.new-entry::after {
  content: " New!"; /* The leading space creates separation
                       between the DOM node's content and the generated content
                       being added. */
  color: red;
}

結果

引號

此示例在引用內容周圍插入不同顏色的引號。

HTML

html

<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.
  </q>
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>

CSS

css

q {
  color: blue;
}

q::before,
q::after {
  font-size: larger;
  color: red;
  background: #cccccc;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

結果

注意，生成的引號型別是基於語言的。預設情況下，瀏覽器會在 <q> 元素前後新增開引號和閉引號，因此即使沒有明確設定，本例中的引號也會出現。可以透過將相應的 content 屬性值設定為 no-open-quote 和 no-close-quote，或將它們都設定為 none 來關閉它們。也可以透過將 quotes 屬性設定為 none 來關閉它們。

向列表項計數器新增文字

此示例將一個夾在兩個 <string> 之間的計數器前置到所有列表項，為無序列表（<ol>）中的列表項（<li>）建立更詳細的標記。

HTML

html

<ol>
  <li>Dogs</li>
  <li>Cats</li>
  <li>
    Birds
    <ol>
      <li>Owls</li>
      <li>Ducks</li>
      <li>Flightless</li>
    </ol>
  </li>
  <li>Marsupials</li>
</ol>

CSS

css

ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}

結果

每個列表項標記上生成的內容添加了文字“item ”作為字首，包括一個空格以將字首與計數器分開，後面跟著“: ”，一個冒號和一個額外的空格。counters() 函式定義了一個數字 items 計數器，其中巢狀的有序列表的數字在大多數瀏覽器中用句點（.）分隔。

帶屬性值的字串

這個例子對列印樣式表很有用。它使用一個屬性選擇器來選擇每個完全合格的安全連結，將 href 屬性的值作為 ::after 偽元素的內容新增到連結文字之後。

HTML

html

<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>

CSS

css

a[href^="https://"]::after
{
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}

結果

生成的內容是 href 屬性的值，前面加上“URL: ”，帶有一個空格，全部放在括號裡。

新增帶替代文字的影像

這個例子在所有連結之前插入一個影像。提供了兩個 content 值。後面的 content 值包含一個帶有替代文字的影像，螢幕閱讀器可以將其作為語音輸出。

HTML

html

<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

下面顯示了顯示影像和設定替代文字的 CSS。這也設定了內容的字型和顏色。

css

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
}

結果

注意：替代文字值在瀏覽器的無障礙樹中公開。有關特定瀏覽器的無障礙面板，請參閱另請參閱部分。

如果使用螢幕閱讀器，當它到達影像時，應該會讀出“MOZILLA”這個詞。您可以使用開發者工具的選擇工具選擇 ::before 偽元素，並在無障礙面板中檢視可訪問名稱。

使用 URL 替換元素

這個例子替換了一個常規元素！該元素的內容被一個使用 <url> 型別的 SVG 替換。

偽元素不會在替換元素上渲染。由於這個元素被替換了，任何匹配的 ::after 或 ::before 都不會被生成或應用。為了證明這一點，我們包含了一個 ::after 宣告塊，試圖將 id 作為生成的內容新增。這個偽元素將不會被生成，因為元素被替換了。

HTML

html

<div id="replaced">This content is replaced!</div>

CSS

css

#replaced {
  content: url("mdn.svg");
}

/* will not show if element replacement is supported */
div::after {
  content: " (" attr(id) ")";
}

結果

在常規元素上生成內容時（而不僅僅是在偽元素上），整個元素都會被替換。這意味著 ::before 和 ::after 偽元素不會被生成。

使用 `<gradient>` 替換元素

這個例子演示瞭如何用任何型別的 <image> 替換元素的內容，在本例中是一個 CSS 漸變。元素的內容被一個 linear-gradient() 替換。我們提供了替代文字，因為所有影像都應該為可訪問性進行描述。

HTML

html

<div id="replaced">I disappear</div>

CSS

css

div {
  border: 1px solid;
  background-color: #cccccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: repeating-linear-gradient(blue 0, orange 10%) /
    "Gradients and alt text are supported";
}

結果

請檢查瀏覽器相容性圖表。所有瀏覽器都支援漸變，所有瀏覽器都支援用影像替換元素，但並非所有瀏覽器都支援漸變作為 content 的值。

使用 `image-set()` 替換元素

此示例使用 image-set() 替換元素的內容。如果使用者顯示器是普通解析度，將顯示 1x.png。具有更高解析度的螢幕將顯示 2x.png 影像。

HTML

html

<div id="replaced">I disappear!</div>

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

css

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  ) / "DPI";
}

結果

規範

規範
CSS Generated Content Module Level 3 # content-property

瀏覽器相容性

另見

::after
::before
::marker
::scroll-button()
::scroll-marker
:target-current
contain
quotes
<gradient>
image-set()
<url>
替換元素
CSS 生成內容模組
CSS 列表和計數器模組
瀏覽器無障礙面板：Firefox 無障礙檢查器、Chrome 無障礙面板和Safari 無障礙樹

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 10 月 13 日⁩，由 MDN貢獻者撰寫。

在 GitHub 上檢視此頁面 • 報告此內容的問題