:after和:before用法总结
伪类包括:hover,:active,:link,:visited,还有css3里面的常用伪类选择器：last-child、：first-child、nth-child等等。
在css中不仅有伪类，还有一个伪元素
w3c上对伪类和伪元素的定义分别为：
- 伪类：伪类用于向某些选择器添加特殊的效果。
- 伪元素：伪元素用于将特殊的效果添加到某些选择器
css3为了明确伪类和伪元素的区别，已经明确了单冒号（：）用于css3伪类，双冒号（：：）用于css3伪元素
但是，为了保证兼容性，现在伪元素普遍还是使用单引号。
伪元素：after和：before的定义和基本用法
：before 选择器在被选元素的内容前面插入内容
：after 选择器在被选元素的内容后面插入内容
使用content属性来指定要插入的内容
content有几个比较有用的值：
- [String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
a:after { content: "↗"; }
- attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
a:after { content:"(" attr(href) ")"; }
- url() / uri() – 用于引用媒体文件。示例：
h1::before { content: url(logo.png); }
- counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：
一个简单的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> blockquote{ background-color: #ccc; color: #fff; height: 100px; width: 400px; text-align: center; line-height: 100px; } blockquote:hover:before{ content: '啊啊啊啊哦'; color: red; } blockquote:hover:after{ content: '啊啊啊啊哦诶'; color: green; } </style> </head> <body> <blockquote>我是一个blockquote</blockquote> </body> </html>
鼠标没有移动到blockqoute上的时候：
鼠标移动到blockqoute上时：
这样就实现了伪元素：before和：after将特殊的效果添加到blockqoute上
以上是用伪元素为被选择器添加特殊效果的例子
下面介绍伪元素的一种清除浮动的作用:
模拟float：center
利用伪元素：before和浮动，就能创造出两个美哦与内容的占位快，实现文字环绕图片的效果
代码如下：
.box .left{ //左边的文字块
float: left;
}
.box .left:before{
content: '';
height: 245px;
width: 153px;
float: right;
}
.box .right{ //右边的文字块
float: right;
}
.box .right:before{
content: '';
height: 245px;
width: 153px;
float: left;
}
