怎么爬before after之间的内容_关于伪元素::before和::after的用法

关于伪元素::before和::after大家一定不会感到陌生。

这篇文章主要总结一下这两个伪元素的常见使用方法，

如果有说的不对的地方，欢迎点评

1.添加文本内容

1-A

利用伪元素添加文本

1-B

效果：

1-C

2.利用attr属性自定义输入内容

2-A

将伪元素中的content值设置为data-content

2-B

效果图：

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在同一元素上使用

3-A

3-B

效果图：

3-C

p元素的计数值为0，所以在p::before中开始计数则为1；

当为counter-reset指定初始(最小)计数值时：

3-D

此时计数则从3开始，如图

3-E

当为counter()指定字符时：

3-F

此时的计数效果：

3-I

3.2在存在父元素的子元素上使用

当counter-reset属性设置在父元素上时：

3-H

在子元素上设置计数得到的效果如下图：

3-I

其余用法与3.1相同

4.利用伪元素制作开关

主要实现步骤参考上一篇文章

4-A 纯css3实现开关按钮

如果需要最后开关代码的可以私我哦。

如果你觉得不错，动动你的小指头给个关注吧。