前提
在日常处理国际化的时候,通常是将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)