本文将介绍伪元素和伪类选择器的一些知识，以及在VUE中伪元素的动态数据更新；
伪元素和伪类：
- 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。他们只在页面显示，但不会在文档的源码中找到，所以是“伪元素”。例如：
//HTML
<body>
<h1 class="title">标题</h1>
<div class="icon">不要温和的走进那个良夜</div>
<p>「感月吟风多少事，如今老去无成，谁看憔悴更凋零。试灯无意思，踏雪没心情。」
「三杯两盏淡酒，怎敌他，晚来风急。」
「欲将血泪寄山河，去洒东山一抔土。」「感月吟风多少事，如今老去无成，谁看憔悴更凋零。试灯无意思，踏雪没心情。」
「三杯两盏淡酒，怎敌他，晚来风急。」
「欲将血泪寄山河，去洒东山一抔土。」</p>
</body>
还有CSS部分：
h1::before {
content: "首行添加-";
color: #DBBB6F;
}
h1::after {
content: "-尾部添加";
color: #5F4C45;
}
/* 只给第一行文字样式 */
p::first-line{
background-color: #EBDFB7;
}
p::first-letter{
font-size: 120px;
color: #5F4C45;
}
.icon{
font-size: 20px;
display: flex;
align-items: center;
}
.icon::before{
content: "";
display: block;
width: 15px;
height: 15px;
background: url(./@someone.png);
background-size: cover;
}
效果如下：
伪元素效果展示
应用场景：伪元素可以在不修改HTML的情况下，通过CSS以及伪元素中的content新增页面的内容，以及在处理小图标+文字方面有独特的优势，避免页面中过多的修饰性DOM。
- 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}
应用场景：伪类可以通过对应的伪类选择器，在相同的元素之中选择指定的元素给定样式，这个可以节省一些类名的指定，可以更快速灵活的指定相同元素的样式。
总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。
vue中为伪元素绑定动态的content：
在实际应用中我们会发现在content中绑定的数据一般是静态的，但是有时候我们需要做一些动态的数据，此时直接的使用var(--collectNum)没有效果；
处理办法：
//模板中
<div class="item_box" :data-attr="collectNum">
//css中
.item_box::after {
content: attr(data-attr);
}
好了，感谢你能看到这里，下期再见
bey
