1. 程式人生 > >css tips —— 在css中完成國際化

css tips —— 在css中完成國際化

思路 怎麽 獲取 結果 clas 轉換 :after 應該 data

前提

在日常處理國際化的時候,通常是將key通過類似intl.xx(key)轉換為對應環境的文案,可是如果需要在css中加入對應邏輯應該怎麽做呢(比如在after的偽元素中顯示不同的文案),畢竟在css中沒辦法通過js代碼將key轉換為文案。

思路

1. 既然不能在css中寫入翻譯過程,那麽就把翻譯結果寫入dom節點中,可以用data屬性存放已經翻譯好的文案,<div class=‘suf‘ data-suffix="翻譯的結果"></div>

2. 在css中讀出data-suffix的值作為content的內容, 可以使用attr()來獲取指定的屬性, .suf::after { content: attr(data-suffix)

css tips —— 在css中完成國際化