关于伪元素::before和::after大家一定不会感到陌生。
这篇文章主要总结一下这两个伪元素的常见使用方法,
如果有说的不对的地方,欢迎点评
1.添加文本内容
![ecb23b2b52e873e62814a6aebeaf2b38.png](https://i-blog.csdnimg.cn/blog_migrate/09607ca2af0d23f9e6671d067d9a8b4a.jpeg)
1-A
利用伪元素添加文本
![4ef7a7bbc628dff31b93b68e02de98f5.png](https://i-blog.csdnimg.cn/blog_migrate/5741d2facda45aed2d59da80bd744d5f.jpeg)
1-B
效果:
![695a6227b75d371b4c4542c5a0b4b023.png](https://i-blog.csdnimg.cn/blog_migrate/32992134aef7fdc7a7917389c6dac4e0.jpeg)
1-C
2.利用attr属性自定义输入内容
![a1dd8790e4025b9e33f5bd09211cb74b.png](https://i-blog.csdnimg.cn/blog_migrate/285f765a64e1c899a38196765d605fa3.jpeg)
2-A
将伪元素中的content值设置为data-content
![84dd0b5fc7d744241139873b9b6beaa8.png](https://i-blog.csdnimg.cn/blog_migrate/f86a6fba53318d5aa83420c08bed03da.jpeg)
2-B
效果图:
![113111b4b682bd4a99421140ed3af1fe.png](https://i-blog.csdnimg.cn/blog_migrate/83d1f467d4c01d67f2b88dc648a54d83.jpeg)
2-C
3.利用counter()实现简单的计数
counter-reset:none|inherit|name (num);//num没有设置时,默认为0counter-increment:none|inherit|name;//name需要与counter-reset中设置的name相对应content:counter(name, style);//name的设置同上,style为显示的方式(非必须),默认为数字
3.1在同一元素上使用
![9717384af4eefcd545ebb6f252a979fc.png](https://i-blog.csdnimg.cn/blog_migrate/39b27619fdd0342e98f775c040866459.jpeg)
3-A
![0c273b84078e7934ebd24efdb933ac52.png](https://i-blog.csdnimg.cn/blog_migrate/e65033460e4588f62fa6f1c08d2b10ba.jpeg)
3-B
效果图:
![10dee715a22beec4fa49263a90b1f5d5.png](https://i-blog.csdnimg.cn/blog_migrate/623486724695da5fceea17a2904427ed.jpeg)
3-C
p元素的计数值为0,所以在p::before中开始计数则为1;
当为counter-reset指定初始(最小)计数值时:
![8a008060e190aefebf9bf93902b40f46.png](https://i-blog.csdnimg.cn/blog_migrate/2d11c07a9bfaaaf7c3e8acfc03cad945.jpeg)
3-D
此时计数则从3开始,如图
![2587e4ddaa722eed8293cecceecc64eb.png](https://i-blog.csdnimg.cn/blog_migrate/1aad0298caa186ba38b47120c3050bbe.jpeg)
3-E
当为counter()指定字符时:
![e495f7c57fa4629505189e7adf9f826d.png](https://i-blog.csdnimg.cn/blog_migrate/c1dbe18e2810c59d314ce1ce5947757f.jpeg)
3-F
此时的计数效果:
![23696a4cac43af8be252385901b23a0b.png](https://i-blog.csdnimg.cn/blog_migrate/f0851d6d9309bfb0bc8035dbeb1152b3.jpeg)
3-I
3.2在存在父元素的子元素上使用
当counter-reset属性设置在父元素上时:
![d643d3e1b65dbcc6efdd4537eb6b96ed.png](https://i-blog.csdnimg.cn/blog_migrate/3f028a39b4a21c8098a7a6f3cdadfb4d.jpeg)
3-H
在子元素上设置计数得到的效果如下图:
![f1e664717f4cbb18032769b484fbd430.png](https://i-blog.csdnimg.cn/blog_migrate/6c95e0361b5f1193081461ba0f7ffcde.jpeg)
3-I
其余用法与3.1相同
4.利用伪元素制作开关
主要实现步骤参考上一篇文章
![1da6f0b8cf919f789a9effed7e71cf0e.gif](https://i-blog.csdnimg.cn/blog_migrate/8f2f420c249a44cec36a918c77bd97b8.gif)
4-A 纯css3实现开关按钮
如果需要最后开关代码的可以私我哦。
如果你觉得不错,动动你的小指头给个关注吧。