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

1. Selector : before { sRules }

例如：

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

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

1. Selector : after { sRules }

例如：

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

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

表3-1  常用content参数表

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

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

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