一、介绍：
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。
事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。
伪类和伪元素：
w3c上对伪类和为元素的定义分别为:
伪类：伪类用于向某些选择器添加特殊的效果。
伪元素：伪元素用于将特殊的效果添加到某些选择器
css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
常见的伪类（pseudo-classes）和伪元素（pseudo-elements）
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标
伪元素的兼容性
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
二、:after和:before的基本用法
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
</head>
<body>
<p>两个黄鹂鸣翠柳，一行白鹭上青天</p>
</body>
</html>
当添加以下代码时：
p:before{
content: '作者：杜甫';
color: red;
}
p:after{
content: '出自《绝句》';
color: red;
}
审查元素会发现：
虽然页面添加了东西，但它并不会出现在dom中，只是起到修饰作用。
content属性
:before和:after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
content可取以下值：
1.string
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style type="text/css">
p:before{
content: '《';
color: red;
}
p:after{
content: '》';
color: red;
}
</style>
</head>
<body>
<p>两个黄鹂鸣翠柳，一行白鹭上青天</p>
</body>
</html>
2.attr();
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style type="text/css">
a:after{
content: '('attr(href)')';
color: red;
}
</style>
</head>
<body>
<a href="http://blog.csdn.net/sinat_32546159">我的博客</a>
</body>
</html>
3.url()/uri()
用于引用媒体文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style type="text/css">
a:before{
content: '('url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488386235452&di=c2737c00b34a5e64f804256fe1a00953&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fbaike%2Fs%253D220%2Fsign%3D8306ef31fdfaaf5180e386bdbc5494ed%2F7e3e6709c93d70cf76daed1af8dcd100baa12b80.jpg)')';
}
a:after{
content: '('attr(href)')';
color: red;
}
</style>
</head>
<body>
<a href="http://sports.qq.com/nba/?ptag=baidu.ald.sc.nba">NBA</a>
</body>
</html>
4.counter()
调用计数器，可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本用法</title>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: counter(section) "、";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
</head>
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
了解更多可参考:http://https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
三、使用
1.清除浮动
清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after与before</title>
<style type="text/css">
*{margin:0;padding:0;}
.clearfix{
zoom:1;
}
.clearfix:after{
content:'.';
display: block;
width: 0;
height: 0;
clear: both;
visibility: hidden;
}
ul{
background: blue;
}
li{
width: 100px;
height: 100px;
border:1px solid red;
float: left;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
</html>
因为对父元素ul设置背景色为蓝色但是父元素并未显示，因为li设置了float：left;导致父元素高度塌陷，此时要为父元素清除浮动，只需为ul加上class="clearfix"即可；此时效果图如下：
2.模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
出自： https://css-tricks.com/float-center/?spm=5176.100239.blogcont49793.6.D9PuiN
3.做出各种图形效果
做一个六角星：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after与before</title>
<style type="text/css">
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six::after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
</head>
<body>
<p id="star-six"></p>
</body>
</html>如下：
查看更多小图标： 更多小图标制作
4.tooltip文字提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after与before</title>
<style type="text/css">
a{
position: relative;
}
a:after{
content: '这是一个超链接';
position: absolute;
transition: all 0.4s ease;
width: 100%;
left: 0;
top: 0;
font-size: 12px;
opacity: 0;
}
a:hover:after{
content: '这是一个超链接';
display: block;
color: red;
top: 20px;
opacity: 1;
}
</style>
</head>
<body>
<a href="#">文字提示效果</a>
</body>
</html>
当鼠标悬停在文字上时，提示文字会缓缓滑出
详见：http://codepen.io/css-tricks/full/wFeaG
5. 炫酷导航效果
具体点击以下链接https://tympanus.net/Development/CreativeLinkEffects/
真的很不错，可以研究下
当然利用伪元素:before和:after还可以做很多东西，再次只总结这么多。
参考：http://www.cnblogs.com/cheerful-queen/p/4971484.html
参考：https://yq.aliyun.com/articles/49793
3790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
