🌻 前言
CSS 伪元素用于设置元素指定部分的样式。伪元素中 ::before 和 ::after 是最常用的，它们分别用于在dom元素前/后插入内容，本文内容就是关于 ::before 和 ::after 的 content 内容的一些冷门用法展开的。
一般我们在使用伪元素时，
content属性只设置过字符串，但是你知道在 content 中可以写css函数吗？但也不是所有css函数都可以使用，这里总结了几种可以用的css函数: [counter()、attr()、var()]tips:可以注意到，可以使用的css函数其实都是返回了字符串，所以像linear-gradient()渐变色这种也是能使用的，只不过这种没有什么意义，没有应用场景。并且在使用 counter()、attr() 函数设置content时，是可以拼接字符串的，是不是很nice✨
话不多说，我们来看看伪元素的 content 究竟可以做些什么？🔍
🎨 案例
1. css文本序号
在写一些文本内容的时候，如果需要在每一段内容前面加上序号。很多小伙伴的常规做法是在 html 里根据index索引设置序号，又或者用:nth-of-type(n)选择器分别从 1 到 n 设置 before 伪元素的content。
其实根本不必这么麻烦，如果你了解css函数 -counter()计数器，就知道加序号是多么简单～
counter()函数以字符串形式返回当前计数器的值。
counter()函数需要与 counter-increment 和 counter-reset 这两个css属性一起配合使用。counter-increment 用来增加一个计数器，counter-reset 用来重置/初始化计数器的值。一般我们可以在伪元素的 content 上应用 counter() 函数来显示在页面上，形成序号的效果
关于兼容性：所有主流浏览器现在都支持counter()函数
counter() 函数有以下两个参数：
counter(countername, counterstyle)
- countername：指定计数器名称（与 counter-reset 和 counter-increment 属性使用的名称相同）；
- counterstyle：设置计数器样式（可以是 CSS list-style-type 属性值，例如
counter（xxx, upper-roman）是设置序号为大写罗马字母：I, II, III, IV, V, 等）
需要注意的是，可以使用 @counter-style 自定义有序符号规则，同样可以当作counterstyle参数设置为计数器样式。具体使用方法自行查阅 【@counter-style规则传送门】
jcode
2. 纯css实现倒计时
纯css实现倒计时有两种思路：
方案一：使用 steps() 逐帧动画显示content
实现倒计时无非就是使 content 的值从 n 递减到 1 ,那么只需要使用 n秒 的 steps(n,end)逐帧动画即可实现 content 内容每秒变化一次，是不是很简单，关键代码如下：
animation: count 5s steps(5,end) forwards;
@keyframes count {
0%{
content: "5";
}
20%{
content: "4";
}
40%{
content: "3";
}
60%{
content: "2";
}
80%{
content: "1";
}
to{
content: "Go!";
}
}
点击运行查看效果 ⬇️ ⬇️ ⬇️
jcode
思考🤔： 很明显，这么做有个缺点，就是你需要几秒到倒计时，就得写几个关键帧修改content，这时候聪明的小伙伴就想到了，
为什么不用var()变量设置content内容呢？这样只需要在动画 100% 时设置 变量为0 即可。你实践之后就会发现，var()变量设置content是不会有补间动画的，这时候聪明的小伙伴又想到了，是不是可以用@property规则自定义这个变量实现动画过程，但你查阅@property规则可定义的类型后发现，没有可以使用的类型（content内容必须是个字符串）。
这时候方案二它来了！！！
方案二：使用 counter() 计数器显示content
既然不能用
@property自定义一个字符串，那我们可以自定义一个数字，然后用counter-reset把数字转换为字符串，怎么样，是不是十分巧妙😆
实现原理为： 使用@property规则自定义一个变量类型，我这里是 “–time”，然后content值设置为counter()计数器，并使用“–time”这个变量重置计数器值，即实现了 content 显示我们的变量内容，这样只需要写一个n秒的动画，100%关键帧设置变量--time为0即可实现倒计时效果。另外为了在倒计时结束后能够出现 “Go!” 的提示效果，可以使用@counter-style关键字自定义一个symbols符号，在变量变化到0的时候这个计时器样式就生效，强行显示成我们设置的 “Go!” 字符。
点击运行查看效果 ⬇️ ⬇️ ⬇️
jcode
3. 自制输入框
dom元素在设置 contenteditable:true 属性后就会呈现可编辑内容的效果，那么输入框的 placeholder 效果怎么实现呢？
最好的方式就是利用伪元素的 content 作为 placeholder，因为伪元素是作为一个特殊节点插入到dom流中的，他不会以标签形式展现在网页中，而且配合 :empty 选择器可以很轻松做到只有在未输入内容时才显示 placeholder。
jcode
4. 空内容提示
与上一点的原理相同，同样是 :empty 选择器配合伪元素 content 实现列表页为空时的占位提示文字。
5. 文字提示 Tooltip
content里也可以使用 attr() 函数，没错，就是获取节点 attribute 属性，例如在
链接后自动拼接链接地址。
当然，它还有个更实用的用法，就是制作文字提示 Tooltip 效果。想必现在还是有很多小伙伴在做 tooltip 组件时使用的是普通的dom元素，鼠标hover时让其显示，其实完全可以用伪元素实现，更方便快捷，还更有逼格～
jcode
6. 前后加引号
content: open-quote 为设置前引号，content: close-quote 为设置后引号。它是css属性quote在 content 中的应用。虽然没什么应用场景，我能想到的比如设置富文本中某个标签包裹的内容，统一都加上引号，用css就可以快速实现，不然的话还需要在html里一个一个改。
🎁 最后
我是喜欢归纳总结前端相关知识的前端阿彬，尽力持续输出原创优质文章，欢迎点赞关注😘
往期文章：
# 玩转css逐帧动画，纯css让哥哥动起来💃
# 🕸2023 前端 SEO 无死角解读
# 我给自己搭建的前端导航网站，你们都别用🤪
# 2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
# 浅谈 强制缓存/协商缓存 怎么用？
# 2023 前端性能优化清单
