:before 和 :after的多用途实践 — 基础篇
来源:互联网 发布:朕是什么意思网络此意 编辑:程序博客网 时间:2024/05/21 18:34
说明
CSS 伪元素用于向某些选择器设置特殊效果
在CSS中,伪元素,是一个很有趣的东西,而:before和 :after,这两个伪元素是我在开发中用到的比较多的,也是在许多系统和库中见到的比较多的,这篇博客先来讲讲这两个伪元素的基础知识!
解释
:before
:before 选择器向选定的元素 前 插入内容。
使用content 属性来指定要插入的内容。
代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> p:before{ content:"这里是生成的内容"; } </style> </head> <body> <p>(前)</p> </body></html>
效果图
:after
:after 选择器向选定的元素之 后 插入内容。
使用content 属性来指定要插入的内容。
代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> p:after{ content:"这里是生成的内容"; } </style> </head> <body> <p>(后)</p> </body></html>
效果图
这种方式就是,内容生成,作用就是使用CSS的方式,向现有的标记中增加新的内容,看上去似乎也没什么难度,content就是生成的内容,before就是在元素之前插入内容,after就是在元素之后插入内容,
然而,我们要知道,content的值,并不是只能是 string,看看下面这张来自菜鸟教程的图,就知道了。
这里,我们说说几个比较有趣的content的值,其他的值大家可以自己试试
先来看取值 counter,也就是计数器,看名字也大概能猜到他是干嘛的了,计数。
我们要想用计数器,先要有一个计数器,有了计数器,还需要告诉他,每一次,需要计几个数,记一个数,就像这样,1,2,3,4,记两个数,就像这样2,4,6,8,然后我们还需要找一个地方用计数器。
所以要用计数器,也就是三个步骤
1、声明计数器
属性:counter-reset
作用:创建或重置 一个或多个计数器
取值:名称 初始值;
例
counter-reset:c1 0;counter-reset:c1 0 c2 10;
注意:
- 初始值可以省略,省略的话为0
counter-reset:c1;counter-reset:c1 c2;
- 哪个元素使用计数器,哪个元素就不声明,简单说,谁用,谁就不声明,不然会出现计数器一直显示同一个数的情况。
2、设置计数器的增量(变化范围)
属性:counter-increment
取值:计数器名 增量值;
作用:设置某个选择器每次出现的计数器的增量,增量值不写默认增量为1
例
counter-increment:c1 1;counter-increment:c1;
注意:
哪个元素使用,在哪个元素中声明增量
3、使用计数器
函数:counter(name[, style]);
配合着 content 属性一起使用
name就是用counter-reset声明的计数器的名称
style是可选的参数,他的值也就是list-style-type支持的那些值
详情参考 http://www.runoob.com/try/try.php?filename=trycss_list-style-type_all
代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <style> .counter{ counter-reset:c; //创建计数器 c } .increment:before{ content:counter(c)"、"; //使用计数器c,后面还加了 、 counter-increment:c; //默认增量为1 } </style> </head> <body> <div class="counter"> <div class="increment">before</div> <div class="increment">内容</div> <div class="increment">after</div> </div> </body></html>
效果图
继续看content取值attr的情况
代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> div:before{ content: attr(data-name);//获取元素data-name属性值,当作content内容 } </style> </head> <body> <div data-name="自定义属性"></div> </body></html>
效果图
简单说,attr就是用来获取属性值的,content:attr(属性名);
接着再看一个url
代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> div:before{ content:url(img/3.jpg); } </style> </head> <body> <div></div> </body></html>
效果图
我们看到这张图,被直接读了出来,这里有一些要注意的
- 不能修改图片的width和height,图片是多大,就显示多大,width和height失效,如果想改变图片大小,可以用图片处理软件,比如PS
- 图片不能进行重复或平铺,也就是说,你没法直接对这张图进行什么有用的操作
总结
到此,算是把这两个伪元素的基础知识说完了,这些只是基础,应该算是比较好理解的,下一篇我们开始,看看他们到底有什么好玩的!
- :before 和 :after的多用途实践 — 基础篇
- :before 和 :after的多用途实践 — 提升篇
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 特效篇(2)
- :before 和 :after的多用途实践 — 特效篇(3)
- :after/::after和:before/::before的区别
- :before/:after和::before/::after的区别
- css2的特性—:after 和:before
- Date的after和before
- css3的before和after
- before和after的使用
- before 和after的应用
- mysql触发器Before和After的区别
- @BeforeClass/@AfterClass 和 @Before/@After的区别
- Date的after和before方法解释
- 慎用Date的after和before
- :before和:after的一些惊人用法
- ::before和::after伪元素的用法
- 1230 元素查找
- Android科普知识之recyclerView与标题栏的滑动变色
- html5第八课时,图片放大溢出解决
- 状态模式
- linux终端
- :before 和 :after的多用途实践 — 基础篇
- html5第八课时,移动的飞机
- 好网站推荐
- springmvc里的转发和重定向
- html5第八课时,灵活布局,flex
- Win10 64位系统设置JAVA环境
- html5第八课时,flex的基础应用
- 利用SSH端口转发作内网穿透
- 框架学习---1、angular简易demo~~购物车