在 CSS 中做字串拼接

以前不知道的小技巧。

簡述

利用擬元素（Pseudo-element）產生的文字內容其實是可以做字串拼接的，例如說：

 <ul>
  <li>aaaa</li>
  <li>bbbb</li>
  <li>cccc</li>
  <li>dddd</li>
</ul>

li::before {
    content: 'String' 'A' '&' 'C';
    color: red;
    margin-right: 10px;
  }

Output：

只要用「引號 ''」來隔開要拼接的字串就可以了（空格可有可無，但建議空啦比較好讀）

搭配 counter 來使用

所以你就能利用這個特性來做出專屬的列表編號：

<ul>
  <li>Title</li>
  <li>Title</li>
  <li>Title</li>
  <li>Title</li>
</ul>

ul {
  margin: 0;
  padding: 0;
  counter-reset: order;
}
li {
  list-style: none;
  counter-increment: order;
}
li::before {
  /* 在這裡自定內容 */
  content: 'Q' counter(order) ':';
  color: red;
  margin-right: 10px;
}

Output：