给伪元素传参数

基本原理：在 html 标签上添加一个属性，在伪元素的 content 后面用 attr() 取参数

// html 代码
<div class="test" val='参数'>这是一个div</div>

// css 代码
.test {
  position: relative;
}
.test::before {
  content: attr(val); // 通过 attr() 接收参数
  color: blue;
  font-size: 20px;
  position: absolute;
  top: -30px;
  left: 50%;
}

效果如下

还有一种方式是直接通过 js 给 html 添加属性

// html 代码
<div class="test">这是一个div</div>

// js 代码
$('.test').attr('val', '参数') // 此处用的 jquery，也可用原生 js，原理一样

// css 代码
.test {
  position: relative;
}
.test::before {
  content: attr(val); // 通过 attr() 接收参数
  color: blue;
  font-size: 20px;
  position: absolute;
  top: -30px;
  left: 50%;
}

效果和上图一样