css魔法：伪元素content内容竟然可以用css函数！

最新推荐文章于 2024-01-26 16:09:53 发布

前端阿彬

最新推荐文章于 2024-01-26 16:09:53 发布

阅读量937

点赞数 1

分类专栏：前端实用知识学习文章标签： css 伪元素 css函数

本文链接：https://blog.csdn.net/qq_38974163/article/details/131162851

版权

前端实用知识学习专栏收录该内容

74 篇文章 21 订阅

订阅专栏

🌻 前言

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时让其显示，其实完全可以用伪元素实现，更方便快捷，还更有逼格～

截屏2023-06-09 下午3.27.31.png

jcode

6. 前后加引号

content: open-quote 为设置前引号，content: close-quote 为设置后引号。它是css属性quote在 content 中的应用。虽然没什么应用场景，我能想到的比如设置富文本中某个标签包裹的内容，统一都加上引号，用css就可以快速实现，不然的话还需要在html里一个一个改。