基础知识--:before伪元素和:after伪元素

​http://book.51cto.com/art/201108/285688.htm">​http://book.51cto.com/art/201108/285688.htm​​

3.7  替换指定位置

大家都知道before和after是前、后的意思。但是奇怪的是，CSS中的:before伪元素和:after伪元素是为源文档中不存在的内容设置样式的。

没有内容怎么设置样式呢？别急！它们有一个content属性，一起使用就可以为某个选择器前、后的内容设置样式了。

下面就来了解一下:before伪元素和:after伪元素的用法。

视频教学：光盘/视频/3/3.7  替换指定位置.avi                   长度：7分钟

3.7.1  基础知识--:before伪元素和:after伪元素

:before用来和content属性一起使用，设置在对象之前(依据对象树的逻辑结构)显示的内容，语法格式如下：

1. 1. 
      
2. Selector : before { sRules } 
   1. 
      

例如：

1. 1. 
      
2. q:before {     
3.  content: open-quote;     
4.  color: red     
5.  }  
   1. 
      

:after用来和content属性一起使用，设置在对象之后(依据对象树的逻辑结构)显示的内容，语法格式如下：

1. 1. 
      
2. Selector : after { sRules }  
   1. 
      

例如：

1. 1. 
      
2. body:after {     
3.    content: "The End";     
4.    display: block;     
5.    margin-top: 2em;     
6.    text-align: center;     
7.  }   
   1. 
      

从语句中可以看到:before和:after都需要与content属性一起使用。在表3-1中列出了常用content参数名称及说明。

表3-1  常用content参数表

参数名称	说  明
attr(alt) :	使用alt特性的文字
counter(name)	使用已命名的计数器
counter(name, list-style-type)	使用已命名的计数器并遵从 指定的list-style-type属性
counters(name, string)	使用所有已命名的计数器
counters(name, string, list-style-type)	使用所有已命名的计数器并遵 从指定的list-style-type属性
no-close-quote	不插入quotes属性的后元素。 但增加其嵌套级
no-open-quote	不插入quotes属性的前元素。 但减少其嵌套级别
close-quote	插入quotes属性的后元素
open-quote	插入quotes属性的前元素
string	使用引号括起的字符串
url	使用指定的绝对或相对地址

假设，有一个HTML页面中包含了如下的代码：

1. 1. 
      
2. <style type="text/css"> 
3. h1:before{ content: "标题：";   }  
4. p{color:blue}  
5. </style> 
6. <h1>花开已远</h1> 
7. <p>你所去的地方，是不是没有寒冷，也没有忧伤。</p> 
   1. 
      

运行后会发现，在"花开已远"文字之前多出了"标题："文字，效果如图3-16所示。

图3-16  实例运行效果