偽元素 content 出現中文亂碼

時傾發表於2022-07-07

偽元素的 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 屬性,其他的屬性和高階特性目前是實驗性的。

相關文章