动态显示伪类 :before中的content

最新推荐文章于 2024-02-05 10:39:03 发布

2401w

最新推荐文章于 2024-02-05 10:39:03 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/asfcyg/article/details/122280748

版权

关键词由CSDN通过智能技术生成

<!-- 
  data-before=""和content:attr(data-before) 配合，可以设置content中的值
  data-before=""不能编译变量，它里面的值会如实显示在页面上
  可以通过js实现动态显示
 -->
<span data-before="点击招全职" class="school-publish-badge">
  {{inter.fxz}}
</span>

.school-publish-badge:before {
  // attr(attribute-name)：获取元素html属性的值,通常与自定义属性data-*配合使用
  content: attr(data-before);
  position: absolute;
  z-index: 1001;
  top: -15px;
  right: -60px;
  width: 120px;
  height: 40px;
  line-height: 20px;
  font-size: 20px;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  font-weight: 700;
  color: #fff;
}

// 动态改变“点击招全职”的值
changeDataBefore(){
  let changeData = document.getElementsByClassName('school-publish-badge');
  changeData[0].setAttribute("data-before", this.i18n.djzqz)
},