生成內容 content 與引號 quotes

CSS 的「生成內容 content」是相當特殊的樣式屬性，這兩個樣式只能套用在特定選擇器，也不會負責「樣式」，而是會產生額外元素的「內容」，這篇教學會介紹生成內容 content 與引號 quotes 的用法。

快速導覽：

生成內容 content

content 搭配 attr()

content 搭配 url()

content 搭配 counter()、counters()

content 組合多種內容

content 顯示引號、空白或反斜線

引號 quotes

CSS 教學 - 生成內容 content 與引號 quotes

生成內容 content

生成內容 content 是專屬於特定「虛擬元素」的樣式屬性，沒有繼承特性，只針對「::before、::after、::marker」這三個虛擬元素有作用，如果套用於虛擬元素之外的元素不會有任何作用。而所謂的「生成內容」並不是生成式 AI，而是會根據使用者輸入的內容，或讀取元素特定屬性值而產生的內容。

更多參考：虛擬元素選擇器 ( 偽元素 )

下方範例會使用 content 搭配虛擬元素，就能在元素的前後加上內容，或將清單標記修改成使用者輸入的內容。

線上展示：https://codepen.io/oxxo/pen/GRbzWpb

<!-- HTML 程式碼 -->
<h3 class="a">apple</h3>
<h3 class="b">banana</h3>
<ul>
  <li>coconut</li>
  <li>papaya</li>
  <li>pineapple</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a::before {
    color: red;
    content: '(oxxo)';  /* 元素前方加上 (oxxo) 文字 */
  }
  .b::after {
    color: red;
    content: '(oxxo)';  /* 元素後方加上 (oxxo) 文字 */
  }
  li::marker {
    color: orange;
    content: "$"       /* 將清單符號修改為 $ */
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - content 在元素的前後加上內容

content 搭配 attr()

使用 content 最常見的用法之一，就是搭配 attr() 函式「顯示元素屬性」 ( attr() 函式也只能針對虛擬元素使用 )，下方範例會讀取元素本身的屬性，再將屬性變成文字呈現在畫面中。

線上展示：https://codepen.io/oxxo/pen/WNqPprw

<!-- HTML 程式碼 -->
<h3 class="a" name='oxxo'>apple</h3>
<h3 class="b" title="oxxo">banana</h3>
<ul>
  <li icon="㊙️">coconut</li>
  <li icon="💩">papaya</li>
  <li icon="🔥">pineapple</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a::before {
    color: red;
    content: attr(name);  /* 讀取元素 name 屬性內容 */
  }
  .b::after {
    color: red;
    content: attr(title);  /* 讀取元素 title 屬性內容 */
  }
  li::marker {
    color: orange;
    content: attr(icon);  /* 讀取元素 icon 屬性內容 */
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - content 搭配 attr()

content 搭配 url()

除了顯示「文字」，content 也可以搭配 url() 函式顯示圖片，但是使用 url() 所顯示的圖片無法修改長寬大小，所以這種用法也比少見。

線上展示：https://codepen.io/oxxo/pen/zYVeZrR

<!-- HTML 程式碼 -->
<h3 class="a">apple</h3>
<h3 class="b">banana</h3>
<ul>
  <li icon="㊙️">coconut</li>
  <li icon="💩">papaya</li>
  <li icon="🔥">pineapple</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a::before,
  .b::after,
  li::marker {
    content: url(https://steam.oxxostudio.tw/download/css/list-style-image-01.jpg);
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - content 搭配 url()

content 搭配 counter()、counters()

參考「清單計數器 counter()、counters()」教學，content 也可以搭配計數器函式 counter()、counters()，實作按照順序出現的數字，或按照順序出現的字母或符號，下方範例呈現兩種函式產生數字或字母的做法：

線上展示：https://codepen.io/oxxo/pen/VwJgpeg

<!-- HTML 程式碼 -->
<div class="d1">
  <h3 class="a">apple</h3>
  <h3 class="b">banana</h3>
  <ul>
    <li icon="㊙️">coconut</li><li icon="💩">papaya</li><li icon="🔥">pineapple</li>
  </ul>
</div>
<div class="d2">
  <h3 class="a">apple</h3>
  <h3 class="b">banana</h3>
  <ul>
    <li icon="㊙️">coconut</li><li icon="💩">papaya</li><li icon="🔥">pineapple</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    counter-reset: oxxo;     /* 定義計數器名稱和初始值 */
    float: left;
    border: 1px solid #000;
    margin: 5px;
  }
  h3, li {
    margin: 5px;
    counter-increment: oxxo; /* 每出現一次 h3 或 li 就將 oxxo 增加 1 */
  }
  .d1 .a::before,
  .d1 .b::after,
  .d1 li::marker {
    color: red;
    content: counter(oxxo);  /* 顯示計數器數值 */
  }
  .d2 .a::before,
  .d2 .b::after,
  .d2 li::marker {
    color: red;
    content: counters(oxxo,"",upper-alpha);  /* 顯示計數器數值對應的字母 */
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - content 搭配 counter()、counters()

content 組合多種內容

content 除了單純使用文字、數值或函式，也可以將這些全部組成成一串字串，數字或文字使用「引號」包覆，函式直接撰寫韓式名稱與參數，彼此之間使用「空白分隔」進行組合，下方範例會將手動輸入的文字、標點符號，組合元素本身的屬性以及計數器數字。

線上展示：https://codepen.io/oxxo/pen/bGPzqpE

<!-- HTML 程式碼 -->
<div class="d1">
  <h3 class="a" name="oxxo">apple</h3>
  <h3 class="b" name="xoox">banana</h3>
  <ul>
    <li icon="㊙️">coconut</li><li icon="💩">papaya</li><li icon="🔥">pineapple</li>
  </ul>
</div>
<div class="d2">
  <h3 class="a" name="oxxo">apple</h3>
  <h3 class="b" name="xoox">banana</h3>
  <ul>
    <li icon="㊙️">coconut</li><li icon="💩">papaya</li><li icon="🔥">pineapple</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    counter-reset: oxxo;
    float: left;
    border: 1px solid #000;
    margin: 10px;
  }
  h3, li {
    margin: 5px;
    counter-increment: oxxo;
  }
  .d1 .a::before,
  .d1 .b::after,
  .d1 li::marker {
    color: red;
    content: counter(oxxo) "." attr(name) attr(icon) ".ok.";
  }
  .d2 .a::before,
  .d2 .b::after,
  .d2 li::marker {
    color: red;
    content: counters(oxxo,"",upper-alpha) "." attr(name)attr(icon) ".ok.";
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - content 組合多種內容

content 顯示引號、空白或反斜線

如果要在 content 裡顯示引號、空白或反斜線，則需要使用「跳脫字元」呈現，但仍需注意 content 無法呈現 HTML 標籤，最終結果都是以字串呈現，下方列出常用的寫法：

特殊符號	寫法
單引號	`\'`
雙引號	`\"`
反斜線	`\\`
空白、連續空白	`\00a0`
撰寫時換行	`\`

下方範例會顯示單引號、雙引號、引號、空白、反斜線以及在 CSS 裡換行的寫法。

線上展示：https://codepen.io/oxxo/pen/eYwxvZG

<!-- HTML 程式碼 -->
<h3 class="a">apple</h3>
<h3 class="b">apple</h3>
<h3 class="c">apple</h3>
<h3 class="d">apple</h3>
<h3 class="e">apple</h3>

<!-- CSS 程式碼 -->
<style>
  h3{margin: 5px;}
  h3::before {color: red;}
  .a::before{
    content: "\"\" "       /* 顯示雙引號 */
  }
  .b::before{
    content: "\' \' ";     /* 顯示單引號 */
  }
  .c::before{
    content: "\' \00a0\00a0\00a0 \" ";  /* 單引號雙引號與連續空白 */
  }
  .d::before{
    content: "\\\\\\\\ ";  /* 連續反斜線 */
  }
  .e::before{
    content: "hello\
      oxxo ";             /* 撰寫時換行 */
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - content 顯示引號、空白或反斜線

引號 quotes

在 HTML 裡被 q 標籤所包覆的文字，會自動在前後加上「引號」，這個引號可以透過樣式屬性 quotes 修改，使其不單純是雙引號或單引號，quotes 具有繼承特性，撰寫時需要同時包含「兩個屬性值」，屬性值使用引號包覆並用空白分隔，前方屬性值代表前方引號，後方屬性值代表後方引號，下方範例會透過 quotes 呈現各種不同引號效果。

線上展示：https://codepen.io/oxxo/pen/oNrmZxQ

<!-- HTML 程式碼 -->
<h3 class="a"><q>apple</q></h3>
<h3 class="b"><q>apple</q></h3>
<h3 class="c"><q>apple</q></h3>
<h3 class="d"><q>apple</q></h3>

<!-- CSS 程式碼 -->
<style>
  h3{margin: 5px;}
  .a{
    quotes: "<" ">";    /* 前後使用 < > 包覆引用文字 */
  }
  .b{
    quotes: "((" "))";  /* 前後使用 (( )) 包覆引用文字 */
  }
  .c{
    quotes: "💩" "💩";  /* 前後使用 💩 💩 包覆引用文字 */
  }
  .d{
    quotes: "\\\\" "\"\00a0\00a0\00a0\"";  /* 使用特殊字元包覆引用文字 */
  }
</style>

CSS 教學 - 生成內容 content 與引號 quotes - 引號 quotes

小結

生成內容 content 與引號 quotes 是 CSS 裡的特殊樣式，除了虛擬元素和引用元素之外，其他元素都不支援這兩個樣式屬性，雖然如此，其中 content 在排版中仍然大量被使用，或許這也跟虛擬元素常常被使用有關吧。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

生成內容 content 與引號 quotes