偽元素 content 出現中文亂碼

偽元素的 content 使用中文字元在某些瀏覽器可能會出現亂碼：

程式碼如下：

.test:before {
  content: '計算結果=';
}

解決方法

首先，確認 charset 為 utf-8

確保 HTML 的 META 屬性設定為 charset='utf-8'。
經測試，還是會出現亂碼。

然後，將中文字元轉成 Unicode 編碼

拿到轉化後的 Unicode 編碼，去掉 u:

.test:before {
  content: '\8ba1\7b97\7ed3\679c\003d';
}

經測試，還是會出現亂碼。

然後，通過 attr 獲取元素屬性內容

<div class='test' data-before='計算結果=' />
 
.test:before {
  content: attr(data-before);
}

如果還會出現亂碼， 就放棄使用偽元素吧.......

attr

屬性函式 attr() 用於獲取 HTML 元素裡面的屬性值並用於樣式中。MDN文件
attr() 理論上能用於所有的 CSS 屬性但目前支援的僅有偽元素的 content 屬性，其他的屬性和高階特性目前是實驗性的。