注释:对于 IE8 及更早版本中的 :before,必须声明 <!DOCTYPE>。

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动。

.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

从我36级转72级英语翻译出来可以看出before与after是之前与之后的意思。

那么就是一个是插入之前,一个是插入之后了。



对以上就是w3school里面的图,你懂了吧。

:before 选择器在被选元素的内容前面插入内容,要使用 content 属性来指定要插入的内容。

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符.

IE10在使用伪元素动画有一个问题:

例如:

>.test:hover {}
>.test:hover::before { /* 这时animation和transition才生效 */ }

css 伪类::after ::beftor 的使用方式的更多相关文章

  1. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  2. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  3. 12、第十二节课,css伪类 (转)

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  4. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  5. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  6. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  7. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  8. 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

随机推荐

  1. GDB代码调试与使用

    GDB代码调试与使用 Linux下GDB调试代码 源代码 编译生成执行文件 gcc -g test.c -o test 使用GDB调试 启动GDB:gdb test 从第一行列出源代码:list 直接 ...

  2. PRML读书会第四章 Linear Models for Classification(贝叶斯marginalization、Fisher线性判别、感知机、概率生成和判别模型、逻辑回归)

    主讲人 planktonli planktonli(1027753147) 19:52:28 现在我们就开始讲第四章,第四章的内容是关于 线性分类模型,主要内容有四点:1) Fisher准则的分类,以 ...

  3. canvas粒子demo

    之前在codepen上看到了类似的效果,于是自己也使用coffee-script写了个相似的demo 效果:http://whxaxes.github.io/canvas-test/src/Parti ...

  4. 【POJ各种模板汇总】(写在逆风省选前)(不断更新中)

    1.POJ1258 水水的prim……不过poj上硬是没过,wikioi上的原题却过了 #include<cstring> #include<algorithm> #inclu ...

  5. angular学习-入门基础

    angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...

  6. ORA-12737: Instant Client Light: unsupported server character set CHS16GBK/ZHS16GBK解决方案

    二.Navicat for Oracle的配置 1.启动该工具,出现如下的开始界面,单击“连接”选项,进行连接数据库,如图所示: 6.在“新建连接”对话框中,输入任意的连接名,选择默认的连接类型,输入 ...

  7. Address already in use: JVM_Bind<null>:80

    Address already in use: JVM_Bind<null>:80 咱还是闲话少说,直接切入正题. 起因: 一直用Tomcat,但是前几天突然报错: java.net.Bi ...

  8. DELL R720系统内存指南

    该文章摘自于:http://www.dell.com/support/article/cn/zh/cndhs1/SLN153646/zh#issue3,仅供个人作为笔记使用 PowerEdge R72 ...

  9. Cas_个人理解

        分为三个部分: 1.Cas服务器(用于验证用户是否正确)        1.用户信息存在服务端,其它客户端应用程序修改用户信息后需要同步到服务端       2.用户信息一般存储在服务端的数据 ...

  10. 【BZOJ 3036】 绿豆蛙的归宿

    求期望的题目(~~~water~~~) 压了下代码,压成15行hhh: 我把代码压成这么丑估计也没有人看吧: 毕竟是zky讲的一个水题,就当给博客除草了:    dfs回溯时求当前节点的f,除以当前节 ...