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

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属性一起使用，设置在对象之前(依据对象树的逻辑结构)显示的内容，语法格式如下：

Selector : before { sRules }

例如：

q:before {
 content: open-quote;
 color: red
 }

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

Selector : after { sRules }

例如：

body:after {
   content: "The End";
   display: block;
   margin-top: 2em;
   text-align: center;
 }

从语句中可以看到: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页面中包含了如下的代码：

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

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

图3-16  实例运行效果