基础知识--: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所示。

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

标签：

原文地址：http://www.cnblogs.com/zkwarrior/p/4839661.html