258资源分享网

CSS样式表的主要作用是修饰Web页面上的HTML标记，但有时候，为了实现某个效果而往页面里反复添加某个HTML标记很繁琐，或者是显得多余，或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方，所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。

之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章，下面我们要详细的再说一下。

事实上，伪元素在CSS里是一系列的元素，比如:first-line, :first-letter, ::selection, :before 和 :after，但在本文中，我们将只讲解 :before 和 :after 这两个。让我们先了解一下这种技术的基本知识。

伪元素语法

早在CSS1里就已经有了伪元素的概念，但我们今天要说的 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before & ::after – 这个样子，用来跟“伪类(pseudo-classes)”区分开，(例如 :hover, :active, 等)。

浏览器对伪元素的支持

然而，不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。

:before和:after伪元素能干嘛？

简言之，这两个伪元素会在真正页面元素之前和之后插入一个额外的元素，从技术角度上讲，它们与下面的HTML标记是等效的。

<p> <span>:before</span> 这里是真正元素的内容 <span>:after</span> </p>

在Web页面的HTML源代码里，你实际上找不到它们，但从视觉上，你却能看到它们的存在，所以我们用这个“伪”字就是表示它们假元素。

:before和:after伪元素的用法

:before和:after伪元素的用法十分简单；下面的代码样例中， :before 和 :after 将会在 blockquote 元素之前和之后插入新内容，它使用content属性，也就是在内容上进行操作。

下面的代码中一个引号标记将出现在blockquote元素的之前和之后。

blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } :before和:after伪元素的CSS样式

:before和:after虽然是伪元素，但它们所有用法和行为表现和真正的元素几乎完全一样；我们可以对它们进行任何的CSS样式设置，例如，改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等等。

blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; bottom: 40px; } :before和:after伪元素宽度和高度设置