关于伪元素::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实现开关按钮

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

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

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

怎么爬before after之间的内容_【微信群教研】我们是怎么进行群内圣诞备课活动的？...
这次活动是[脑洞英语课堂]推出的圣诞备课活动,时间为12.12-12.18,期间各群洞友们阅读共读内容.完成共读作业.参加脑洞奇葩说,并在最后完成了课件的制作. 首先要恭喜初中1群的5位老师,以高质量 ...
怎么爬before after之间的内容_可见性有序性，Happens-before来搞定
写在前面上一篇文章 https://dayarch.top/2019/09/04/bing-fa-bian-cheng-san-da-wen-ti/ 谈到了可见性/原子性/有序性三个问题,这些问题通 ...
伪元素写竖线_用伪元素画出太极图
本博客介绍了如下内容: 1.伪元素的特征: 2.如果不通过伪元素,普通小白画八卦图方法: 3.如何通过伪元素装逼方法来画八卦图方法: 4.介绍了渐变色的生成工具和动画生成工具: 5.伪元素的注意问题. ...
vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
python爬取微信群聊内容_再不学Python 你就被同龄人甩开了吗？
原创: 潘懿锟唐佩瑶清华大学(分数线,专业设置)清新时报记者 | 潘懿锟唐佩瑶 "会Python的人,工作都不会太差.追上同龄人,就趁现在!" 或许你已经对微信的广告推送感 ...
python爬取一条新闻内容_自己做语料——Python爬取新闻联播文字版
因为学习需要,想自己弄一些语料玩玩,新闻联播似乎是个不错的选择,然后百度了一下: 感觉还是挺多的....所以我选择了第二个..就是http://www.xwlbo.com/txt.html这个网址. ...
css提取页面元素唯一性_一日一技：爬虫如何正确从网页中提取伪元素？
摄影:产品经理家里做点简单菜我们来看一个网页,大家想想使用 XPath 怎么抓取. 可以看到,在源代码里面没有请抓取我!这段文字.难道这个网页是异步加载?我们现在来看一下网页的请求: 网页也没有发起 ...
利用python的scrapy框架爬取google搜索结果页面内容
scrapy google search 实验目的爬虫实习的项目1,利用python的scrapy框架爬取google搜索结果页面内容. https://github.com/1012598167/ ...
python爬取新浪新闻意义_爬取新浪新闻
[Python] 纯文本查看复制代码import requests import os from bs4 import BeautifulSoup import re # 爬取具体每个新闻内容 de ...

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

1.添加文本内容

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

3.利用counter()实现简单的计数

4.利用伪元素制作开关

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

最新文章

热门文章