识别伪元素,实现国际化

174 阅读1分钟

因为现有的项目要实现国际化,但之前开发时用到了伪元素,伪元素里面写的有中文,css也没法写逻辑判断,当时也是很无奈,后在网上找到这个方法。

$('.filt-box .bar-tip > div:nth-of-type(1)').attr('data-suffix', getI18Value('在线观看时长'))
$('.filt-box .bar-tip > div:nth-of-type(2)').attr('data-suffix', getI18Value('课堂回看时长'))
$('.filt-box .bar-tip > div:nth-of-type(3)').attr('data-suffix', getI18Value('课堂时长'))

在你写伪元素的标签上通过js来判断当前环境,然后给该标签加上 'data-suffix' 属性,也就是你翻译过的文本,然后在伪元素使用attr来取:

.page-info .filt-box .bar-tip > div:nth-of-type(1)::after {

color: #3A8BFF;

margin-top: -20px;

content: attr(data-suffix);

width: 120px;

height: 0;

float: right;

position: absolute;

top: 0;

left: 40%;

}