css变量+伪元素content

变量（自定义属性）

　　变量是浏览器原生特性，无需经过任何转译即可直接运行，也是DOM对象，极大便利了css和js之间的联系。同时还可以结合calc()使用

　　自定义属性：--var

　　函数（用于引用自定义属性）：var()

<ul class="strip-loading">
    <li style="--line-index: 1;"></li>
    <li style="--line-index: 2;"></li>
    <li style="--line-index: 3;"></li>
    <li style="--line-index: 4;"></li>
    <li style="--line-index: 5;"></li>
    <li style="--line-index: 6;"></li>
</ul>

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

　　css中的变量--line-index和--time使每个li拥有一个属于自己的作用域

　　calc(var(--line-index)*200ms)就像一个js函数，在当前节点的作用域上读取相应的变量（List集合里具备与索引递增相关的属性值都可用变量和calc()结合使用生成）

 

伪元素的content

　　content不止可以插入普通字符串，可以实现：

　　内容拼接：css字符串拼接有自己的规则，既不能使用+相连也不可用空格间隔

.elem {
    content: "Hello ""CSS"; // 等价于"Hello " "CSS"
}

　　结合attr()使用：attr()选择器有着强大的属性捕获功能，场景：一个数据集合需遍历到每个DOM上并把某个字段插入到其::after上

<li v-for="v in list" :key="v.id" :data-name="v.name">

li::after {
    content: attr(data-name);
}

　　结合变量和计数器使用：

　　　　css计数器：

<style>
body {
// counter-reset-----创建或者重置计数器
  counter-reset: section;
}

h2::before {
// counter-increment----------递增变量
  counter-increment: section;
// content--------插入生成的内容
// counter()或counters()函数------将计数器的值添加到元素
  content: "Section " counter(section) ": ";
}
</style>

<h1>使用 CSS 计数器:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>