因为现有的项目要实现国际化,但之前开发时用到了伪元素,伪元素里面写的有中文,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%;
}