:after和:before炫酷用法总结
来源:互联网 发布:淘宝客服主管用的软件 编辑:程序博客网 时间:2024/06/06 11:36
引入
提到伪类,在我的印象中最常用的不过是:hover、:active、:link、:visited,还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等,说实在其他的我发现"然并卵"。
百度一下:after和:before会发现有很多关于研究它们用法的文章,形形色色各式各样,说明这两个伪元素在实际工作中还是很实用的,再结合css3的动画,它们能为页面添加很多意想不到的效果!
从学习伪类,不小心又延伸到了伪类元素(eg.我们常见的::before和:hover之间为什么缺少了一个冒号呢?),那什么又叫伪类元素?伪类和伪类元素有什么区别?下面就跟着我一起来学习一下吧O(∩_∩)O~有说的不对的地方欢迎批评指正!~
---------------------------------------------------------------------------------------我是引入和正文的分割线---------------------------------------------------------------------------------------
伪类和伪元素
w3c上对伪类和为元素的定义分别为,
伪类:伪类用于向某些选择器添加特殊的效果。
伪元素:伪元素用于将特殊的效果添加到某些选择器
css3为了明确伪类和伪元素的区别,已经明确了单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素
但是,为了保证兼容性,现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍~
常见的伪类(pseudo-classes)和伪元素(pseudo-elements)
伪元素的兼容性
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
伪元素:before和:after的定义和基本用法
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
使用 content 属性来指定要插入的内容。
content有几个比较有用的值:
[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:
attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:
url() / uri() – 用于引用媒体文件。示例:
counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:
----------------------------------- 一个粗糙的栗子 ---------------------------------------
为了写出让自己看得懂也能让别人看的懂的博客,下面我们来举一个(粗糙的)栗子~
详细代码如下:
鼠标没有移动到blockqoute上的时候是酱紫的,
鼠标移动到blockqoute上的时候是酱紫的,
这样就实现了 “ 伪元素:before和:after将特殊的效果添加到blockqoute上的效果 ”,当然这个很糙的栗子只是体现了它的基本用法而已,下面我们来了解一下它的一些有意思的用法吧~
有意思的用法
网上在介绍清浮动中最狂拽炫酷吊炸天的清浮动方法 : ) ,只要把.clearfix加在浮动父级就可以了
给浮动父级添加clearfix后
模拟float:center(当然并没有center这个值,只是模拟)
这样利用伪元素:before和浮动,就能创造出两个没有内容的占位块,实现文字环绕图片的效果了~~效果蛮不错的有木有
这些图标都是可以利用伪元素做出来的哟!~不用再引用麻烦的bootstrap图标了,还得引入他们的一堆文件惹,真麻烦~ ( ̄~ ̄) ~真矫情
DEMO(实用小图标的源css代码都在这里面哟!)
像这样的1,2,3的序号一般大家是怎样做的呢?用span?用图片?是不是用了span后还要进行定位?是不是很麻烦呢?
现在我们可以用伪元素来做列表序号,而且列表的一项删除了以后,其他的列表序号会自动改变,成为一个有顺序的列表~484很方便!
不过这里需要一个用到content的一个属性,那就是counter()。对于couter又是一个知识点,后期可以进行深入了解,这里找到了一个相关的有用博文,请戳~
DEMO
DEMO
提到伪类,在我的印象中最常用的不过是:hover、:active、:link、:visited,还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等,说实在其他的我发现"然并卵"。
百度一下:after和:before会发现有很多关于研究它们用法的文章,形形色色各式各样,说明这两个伪元素在实际工作中还是很实用的,再结合css3的动画,它们能为页面添加很多意想不到的效果!
从学习伪类,不小心又延伸到了伪类元素(eg.我们常见的::before和:hover之间为什么缺少了一个冒号呢?),那什么又叫伪类元素?伪类和伪类元素有什么区别?下面就跟着我一起来学习一下吧O(∩_∩)O~有说的不对的地方欢迎批评指正!~
---------------------------------------------------------------------------------------我是引入和正文的分割线---------------------------------------------------------------------------------------
伪类和伪元素
w3c上对伪类和为元素的定义分别为,
伪类:伪类用于向某些选择器添加特殊的效果。
伪元素:伪元素用于将特殊的效果添加到某些选择器
css3为了明确伪类和伪元素的区别,已经明确了单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素
但是,为了保证兼容性,现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍~
常见的伪类(pseudo-classes)和伪元素(pseudo-elements)
伪元素的兼容性
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
伪元素:before和:after的定义和基本用法
- 定义
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
- 使用
使用 content 属性来指定要插入的内容。
content有几个比较有用的值:
[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:
attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:
url() / uri() – 用于引用媒体文件。示例:
counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:
----------------------------------- 一个粗糙的栗子 ---------------------------------------
为了写出让自己看得懂也能让别人看的懂的博客,下面我们来举一个(粗糙的)栗子~
详细代码如下:
鼠标没有移动到blockqoute上的时候是酱紫的,
鼠标移动到blockqoute上的时候是酱紫的,
这样就实现了 “ 伪元素:before和:after将特殊的效果添加到blockqoute上的效果 ”,当然这个很糙的栗子只是体现了它的基本用法而已,下面我们来了解一下它的一些有意思的用法吧~
有意思的用法
- 清浮动
网上在介绍清浮动中最狂拽炫酷吊炸天的清浮动方法 : ) ,只要把.clearfix加在浮动父级就可以了
给浮动父级添加clearfix后
模拟float:center(当然并没有center这个值,只是模拟)
这样利用伪元素:before和浮动,就能创造出两个没有内容的占位块,实现文字环绕图片的效果了~~效果蛮不错的有木有
- 一些实用的小图标、小图形
这些图标都是可以利用伪元素做出来的哟!~不用再引用麻烦的bootstrap图标了,还得引入他们的一堆文件惹,真麻烦~ ( ̄~ ̄) ~真矫情
DEMO(实用小图标的源css代码都在这里面哟!)
- 作为列表序号
像这样的1,2,3的序号一般大家是怎样做的呢?用span?用图片?是不是用了span后还要进行定位?是不是很麻烦呢?
现在我们可以用伪元素来做列表序号,而且列表的一项删除了以后,其他的列表序号会自动改变,成为一个有顺序的列表~484很方便!
不过这里需要一个用到content的一个属性,那就是counter()。对于couter又是一个知识点,后期可以进行深入了解,这里找到了一个相关的有用博文,请戳~
- tooltip
DEMO
- 炫酷导航效果
DEMO
阅读全文
0 0
- :after和:before炫酷用法总结
- :after和:before用法
- after、before伪元素用法总结
- :before和:after的一些惊人用法
- ::before和::after伪元素的用法
- ::before 和 ::after 伪元素用法
- CSS ::before 和 ::after 伪元素用法
- CSS3中:before和:after的用法
- ::before和::after伪元素的用法
- before,after 和 content的一些用法
- ::before和::after伪元素的用法
- CSS伪元素--:after-:before的炫酷用法
- :after/::after和:before/::before的区别
- :before/:after和::before/::after的区别
- ::after和::before
- ::before和::after
- 【CSS3】::before和::after
- CSS :before 和 :after
- linux网络编程之posix线程(一)
- 杨辉三角形
- java注解浅析
- 流媒体服务器
- FFmpeg的H.264解码器源代码简单分析:解析器(Parser)部分
- :after和:before炫酷用法总结
- 滚轮效果View的日期选择器和时间选择器和对话框
- 【C++】【LeetCode】36. Valid Sudoku
- lightgbm java加载模型
- Java学习笔记系列01
- 动态代理再分析
- ajax向后台传递多个对象
- R语言抓字符删重match
- fcn系列