---

theme: fancy

这是我参与「第四届青训营 」笔记创作活动的第6天.

背景:

在青训营中我们组的仿掘金官网项目经大家商量后决定用vue去写,在写文章详情页的点赞UI的时候发现掘金的点赞的数值是after伪类选择器加上的.

然后在自己尝试过程中发现:

```

```

其中变量name并没有生效. 在网上搜索后发现了这几种方法特意总结一下.

解决方法:

方法一:

直接在style里设置变量. ```

```

方法二:

直接在标签中创建新属性,讲属性值和data里的变量绑定.然后使用attr()获取属性值. ```

export default { data() { return { // 可以修改的内容 content:'动态的内容' } } }

// 使用attr 绑定对应的data-attr ，获取其中的值 .test::before {

content: attr(data-attr);

}

```

方法三:

因为要传递的数据是字符串,所以直接在其值的两侧加单引号即可.

```

```

方法四:

虽然content属性本身不支持变量，但是counter-reset属性后面的计数器初始值是支持的，于是我们可以来一招移花接木让CSS var变量值作为字符在页面中显示。此方法可用于变量是数字时去写进度条.

/* 有效 */ .bar::after { counter-reset: progress var(--percent); content: counter(progress); }