显示生成内容与引号

CSS 的“生成内容 content”是相当特殊的样式属性，这两个样式只能套用在特定选择器，也不会负责“样式”，而是会产生额外元素的“内容”，这篇教学会介绍生成内容 content 与引号 quotes 的用法，还有鲜少人使用的关键字 before-quote、after-quote 读取引号值，或搭配虚拟元素加入引号。

快速导览：

• 生成内容 content
  • content 搭配 attr()
  • content 搭配 url()
  • content 搭配 counter()、counters()
  • content 组合多种内容
  • content 显示引号、空白或反斜线
• 引号 quotes
• 读取引号 before-quote、after-quote

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

生成内容 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>

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>

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>

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>

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>

content 显示引号、空白或反斜线

如果要在 content 里显示引号、空白或反斜线，则需要使用“跳脱字元”呈现，但仍需注意 content 无法呈现 HTML 标签，最终结果都是以字串呈现，下方列出常用的写法：

下方范例会显示单引号、双引号、引号、空白、反斜线以及在 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>

引号 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>

quotes 也可以设定“多层引号”，只要让引号符号“两个为一组”，就会“由前到后”计算出每一层该用的引号符号，如果元素层级数量超过符号数量，内层会继续使用最后一个读取到的符号，下方范例会先设定三组共六个符号，接着套用到一层到四层的元素架构中显示。

• 特别注意！如果是“奇数”的符号会发生错误无法显示。
• 线上展示：https://codepen.io/oxxo/pen/raOLjGr

<!-- HTML 程式碼 -->
<h3><q>apple</q></h3>
<h3><q>apple<q>banana</q></q></h3>
<h3><q>apple<q>banana<q>oxxo</q></q></q></h3>
<h3><q>apple<q>banana<q>oxxo<q>papaya</q></q></q></q></h3>
<h3><q>apple<q>banana<q>oxxo<q>papaya<q>coconut</q></q></q></q></q></h3>

<!-- CSS 程式碼 -->
<style>
  h3{
    margin: 5px;  
    quotes: "💩" "💩" "❤️" "❤️" "🔥" "🔥"; 
  }
</style>

读取引号 open-quote、close-quote

除了使用 quotes 可以定义引号，另外有两个针对虚拟元素 content 的引号关键字：open-quote 和 close-quote，这两个关键字有很专一的使用情境，open-quote 可以读取前方引号，必须搭配 ::before，close-quote 可以读取后方引号，必须搭配 ::after，如果没有摆放在正确的位置，就会无法显示。

下方范例会透过虚拟元素搭配这两个关键字，在不使用 q 元素的情况下。将其他元素的前后加上引号。

• 更多参考：虚拟元素选择器 ( 伪元素 )
• 线上展示：https://codepen.io/oxxo/pen/raOpyMP

<!-- HTML 程式碼 -->
<div>
  <h1>hello</h1>
  <h2>hello</h2>
  <h3>hello</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div *::before {
    content: open-quote;
    color: red;
  }
  div *::after {
    content: close-quote;
    color: red;
  }
</style>

如果有使用 quotes 定义引号，透过这两个关键字也可以读取所定义的引号值。

线上展示：https://codepen.io/oxxo/pen/zxvpZKX

<!-- HTML 程式碼 -->
<div>
  <h1>hello</h1>
  <h2>hello</h2>
  <h3>hello</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    quotes: "❤️" "❤️" "💩" "💩";
  }
  div *::before {
    content: open-quote;
    color: red;
  }
  div *::after {
    content: close-quote;
    color: red;
  }
</style>

如果透过虚拟元素搭配 open-quote、close-quote 建立引号，就要特别注意“巢状包覆”的状况，这时候虚拟元素的 ::before 会变成“前引号”，::after 会变成“后引号”，如果只使用了 ::before 而没有使用 ::after 结尾，在 ::before 后方所出现的引号就会是“内层”引号，下方的范例在 h1 使用了 ::before，但却在 h4 才用 ::after，这时候内容的引号就会变成内层引号，套用内层引号样式。

线上展示：https://codepen.io/oxxo/pen/qEOprqB

<!-- HTML 程式碼 -->
<div>
  <h1>我只有設定 ::before</h1>
  <h2>我設定了 ::before + ::after</h2>
  <h3>我只有設定 ::after</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    quotes: "❤️" "❤️" "💩" "💩";
  }
  h1::before, h2::before {
    content: open-quote;
    color: red;
  }
  h2::after, h3::after {
    content: close-quote;
    color: red;
  }
</style>

小结

生成内容 content 与引号 quotes 是 CSS 里的特殊样式，除了虚拟元素和引用元素之外，其他元素都不支援这两个样式属性，虽然如此，其中 content 在排版中仍然大量被使用，或许这也跟虚拟元素常常被使用有关吧。

意见反馈