一、定义

:before   选择器在被选元素的内容前面插入内容。

 :after     选择器在被选元素的内容后面插入内容。

二、使用

 使用 content 属性来指定要插入的内容。它的有用的几个值：

 1、[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。

示例：   a:after { content: "↗"; }

2、attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。

示例：a:after { content:"(" attr(href) ")"; }

3、url() / uri() – 用于引用媒体文件。

示例：h3::before { content: url(logo.png); }

4、counter() –  调用计数器，可以不使用列表元素实现序号功能。

示例：h3:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

三、应用

1、文字提示

2、 清浮动

3、模拟float:center

4、实现一些小图标、小图形：比如五角星、搜索图标等等

5、列表序号

6、动画效果

比如：上海市政府网站内页各板块鼠标放上去边线左右移动显示效果

1. /* panel */ 
2. .panel { 
3.     position: relative; 
4.     overflow: hidden; 
5.     margin-bottom: 20px; 
6.     padding: 0 20px; 
7.     border-radius: 0; 
8.     -webkit-transition: all .15s ease-in-out; 
9.     transition: all .15s ease-in-out; 
10.     border: 0; 
11. } 
12. .panel:hover:after, 
13. .panel:hover:before { 
14.     position: absolute; 
15.     left: 0; 
16.     right: 0; 
17.     height: 1px; 
18.     background: #bf0c0d; 
19.     content: ''; 
20. } 
21. .panel:hover:after { 
22.     top: 0; 
23.     animation:panel-top-solid 5s infinite alternate;  
24.     -webkit-animation:panel-top-solid 5s infinite alternate ;  
25.     -moz-animation:panel-top-solid 5s infinite alternate ;  
26.     -o-animation:panel-top-solid 5s infinite alternate ;  
27.     -ms-animation:panel-top-solid 5s infinite alternate ;  
28. } 
29. @keyframes panel-top-solid{  
30.     0% {left:0;}  
31.     50% { left: 100%;} 
32.     100% {left:0;}  
33.   }  
34.   @-webkit-keyframes panel-top-solid{  
35.     0% {left:0;}  
36.     50% { left: 100%;} 
37.     100% {left:0;}  
38.   }  
39.   @-moz-keyframes panel-top-solid{  
40.     0% {left:0;}  
41.     50% { left: 100%;} 
42.     100% {left:0;}   
43.   }  
44.   @-o-keyframes panel-top-solid{  
45.     0% {left:0;}  
46.     50% { left: 100%;} 
47.     100% {left:0;}   
48.   }  
49.   @-ms-keyframes panel-top-solid{  
50.     0% {left:0;}  
51.     50% { left: 100%;} 
52.     100% {left:0;}  
53.   }  
54.  
55. .panel:hover:before { 
56.     bottom: 0; 
57.     animation:panel-bottom-solid 5s infinite alternate;  
58.     -webkit-animation:panel-bottom-solid 5s infinite alternate ;  
59.     -moz-animation:panel-bottom-solid 5s infinite alternate ;  
60.     -o-animation:panel-bottom-solid 5s infinite alternate ;  
61.     -ms-animation:panel-bottom-solid 5s infinite alternate ;  
62. } 
63. @keyframes panel-bottom-solid{  
64.     0% {right:0;}  
65.     50% { right: 100%;} 
66.     100% {right:0;}  
67.   }  
68.   @-webkit-keyframes panel-bottom-solid{  
69.     0% {right:0;}  
70.     50% { right: 100%;} 
71.     100% {right:0;}  
72.   }  
73.   @-moz-keyframes panel-bottom-solid{  
74.     0% {right:0;}  
75.     50% { right: 100%;} 
76.     100% {right:0;}   
77.      
78.   }  
79.   @-o-keyframes panel-bottom-solid{  
80.     0% {right:0;}  
81.     50% { right: 100%;} 
82.     100% {right:0;}   
83.   }  
84.   @-ms-keyframes panel-bottom-solid{  
85.     0% {right:0;}  
86.     50% { right: 100%;} 
87.     100% {right:0;}  
88.   } 
89.  
90. 
       内容...