认识伪类元素:before和:after
起因于不理解下图点的写法,后来发现是个很基础的东西
运用了伪类元素:before,如下
注意,他的css写法也是非常简洁高效的。
查阅了些关于伪类before和after的知识帮助理解,以下摘自:http://www.hulufei.com/post/about-before-and-after-pseudo-element
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:
#example:before {content:"#";color: red;}#example:after {content:"$";color: red;}
这段代码会在#example元素内容之前插入一个'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素,效果如下:
Here is the example content
需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。
#example:before {content:"";display: block;width:100px;height:100px;}
伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。
除了插入文字内容,还可以指定其他内容:
p:before {content: url('img.jpg');} a:after {content: attr(href);}
attr()函数会返回指定元素对应属性的值
最后,奉上最惦记的浏览器支持情况
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- Pretty much all mobile browsers.
放在伪类元素里面的内容一般都只是装饰性的,所以即便是IE6/7不支持也应该能降级到正常显示主体内容。
:before和:after的一些惊人用法
>. clearfix hack
如果父元素容器里面的子元素是浮动元素的话,我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起,但是这种方法引入了多余的无意义标签,并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS,所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没,只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现:(viaNicolas Gallagher)
/* For modern browsers */.clearfix:before,.clearfix:after {content:"";display:table;}.clearfix:after {clear:both;}/* For IE 6/7 (trigger hasLayout) */.clearfix {zoom:1;}
>. CSS实现的八卦图案
#yin-yang {width:96px;height:48px;background:#eee;border-color: red;border-style: solid;border-width:2px2px50px2px;border-radius:100%;position: relative;}#yin-yang:before {content:"";position: absolute;top:50%;left:0;background:#eee;border:18px solid red;border-radius:100%;width:12px;height:12px;}#yin-yang:after {content:"";position: absolute;top:50%;left:50%;background: red;border:18px solid #eee;border-radius:100%;width:12px;height:12px;}
资源链接
- Learning To Use The :before And :after Pseudo-Elements In CSS
- The Shapes of CSS
- Pseudo-elements reference
- Add steps counter in form via CSS
转载于:https://www.cnblogs.com/2boy/p/3316842.html
认识伪类元素:before和:after相关推荐
- 使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
- 伪类元素--before和after
文章目录 1.基本用法 2.样式修改 3.清除浮动 5.content属性 1.string 2.attr() 3.url()/uri() 4.counter() before/after伪类相当于在 ...
- JavaScript前端中的伪类元素before和after使用详解
在前端开发中,伪类是一种让你可以选择元素的某个状态或位置的 CSS 选择器.其中,:before 和 :after 伪类允许你在一个元素之前或之后插入内容. :before 和 :after 伪类创建 ...
- html中after后面添加文字,使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
- css伪类元素实现小圆点效果
前言: 使用伪类元素 ::before,::after 来实现 小圆点效果. 效果图: 实现方式: 1.父级元素 postion:relative; //定位属性,可为absolute //必须 ...
- css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和C ...
- CSS样式中伪类和伪类元素的区别(css中一个冒号和两个冒号的区别)
首先介绍下什么是伪类,所谓伪类就是: 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于 状态是动态变化的,所以一个元素达到一个特 ...
- css伪类元素及选择器
文章目录 伪类选择器使用 nth-child伪类选择器运用 伪元素:before和:after使用 伪类选择器使用 :first-child 选择某个元素的第一个子元素(IE6不支持):last-ch ...
- css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
最新文章
- java 读取url https_如何获取URL链接是http还是https
- Python基础知识梳理(一)
- linux下怎么修改mysql的字符集编码
- python pip国内镜像
- 【ESSD技术解读】 云原生时代,阿里云块存储 ESSD 快照服务如何被企业级数据保护所集成?
- 使用Java将HTML转成Word格式文件
- linux的strace命令(详解)
- AnalyticDB for MySQL 3.0基础版重磅发布
- 头条搜索发布2020年十大流行语:逆行者、集美、后浪位列前三
- Recoil是React新的“Redux”吗?
- theano学习——内置数据类型
- 数据--第39课 - 二叉树课后练习
- 两路共享LSTM时序数据预测实战+界面可视化应用
- hashmap7源码浅析及与hashmap8的比较
- Ubuntu13.04安装OpenCV2.4.5
- 设计模式-责任链设计
- 基于大数据的智慧旅游数据分析系统
- 开发的免费Windows 8 应用程序
- JDK 11JAVA11下载分享
- Guice 快速入门
热门文章
- android 中断处理流程,Android P的native crash处理流程
- python两个元组相加_《第5章 Python 列表与元组》5.1.3 序列相加(Adding)!
- 嵌入式计算机的特点和应用,以下描述中,()不是嵌入式操作系统的特点。A.面向应用,可以进行裁剪和移植B.用 - 信管网...
- 新代数控系统参数说明书_台湾新代宏程序编程书
- dataset的去重计数 g2_向工程渣土运输车辆计数 漏洞损失说“不”
- Projection投影
- Android设计模式之——状态模式
- 如何高效、可移植申请内存代码。
- 传腾讯人事大地震 马化腾将重整公司架构
- 多线程原理实例应用详解