注释:对于 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. c#字符串转换为日期,支持任意字符串

    文章关键字: c#字符串转换为日期 c#日期转换字符串   字符串转换日期   字符串转换为date   整数转换为字符串   浮点数转换为字符串 字符串转换为时间   将字符串转换为时间   字符转 ...

  2. Mono Json序列化和Windows 下的差别

    在Window下DataContractJsonSerializer 的序列化的时候 只要属性具有Get访问器就可以序列化为string 但是Mono下要想序列话 那么属性必须具有Get 和Set才能 ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. Android应用程序模拟手机按键

    记得以前在做一个C++项目时,需要在某一步操作之后人为用代码模拟敲键盘上的回车键(Enter)效果. 出于好奇,这几天研究了一下Android中手机(或平板)上各种按键的键值.模拟方法及最终效果. 1 ...

  5. JavaScript 里 new 出来的对象 怎么销毁它?

    JavaScript的规范(ECMA-262 ECMAScript)没规定JavaScript引擎要如何实现对JavaScript对象的内存管理.实际实现中几乎所有JavaScript引擎都使用基于跟 ...

  6. 团队项目--关于QQ项目的运行和总结

    目前为止该QQ项目实现如下功能:添加好友到好友列表,可以把好友在不同分类中移动,同时支持离线查找添加好友,离线更换头像,离线发送消息,保存所有好友聊天记录,发送窗口抖动,查看对方信息,更改/添加信息等 ...

  7. OC基础--分类(category) 和 协议(protocol)

    OC 中的category分类文件相当于 C#中的部分类:OC 中的protocol协议文件(本质是头文件)相当于 C#中的接口.今天就简单说明一下OC中的这两个文件. 由于视频中的Xcode版本低, ...

  8. hdu4333 扩展KMP

    慢慢研究可以发现,可以用扩展kmp来求.由于扩展kmp的next[]只有一部分,当前位子前面那部分和母串的后部分,所以可以将字符串复制接在后面一次. 先求如果next[]>0&& ...

  9. BZOJ-1433 假期的宿舍 最大流+基础建图

    网络流练习ing.. 1433: [ZJOI2009]假期的宿舍 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1748 Solved: 765 [S ...

  10. BZOJ2535 [Noi2010]Plane 航空管制2

    Description 世博期间,上海的航空客运量大大超过了平时,随之而来的航空管制也频频发生.最近,小X就因为航空管制,连续两次在机场被延误超过了两小时.对此,小X表示很不满意. 在这次来烟台的路上 ...