级联样式表(CSS)的主要目的是为HTML元素设置样式，但是，在某些情况下，向文档添加额外元素是多余的或不可能的。事实上，CSS中有一个特性可以让我们在不干扰文档本身的情况下添加额外的元素，这就是“伪元素”。您一定听说过这个术语，特别是如果您一直在学习我们的教程。点此浏览原作者的其他文章事实上，确实有一些CSS家族成员（CSS选择器）被归类为伪元素如：first-line、:first-letter、::selection、:before和:after。但是，出于本文的目的，我们将讨论限制在:before和:after元素上。因此，本文中的“伪元素”将特指这两个伪元素（:before和:after），我们将从头开始研究这个独特的主题。关于语法和浏览器支持伪元素其实在CSS1中就已经存在了，但是我们说的:before和:after是在CSS2.1中发布的。一开始，伪元素的语法是使用“:”（冒号）。随着web的发展，CSS3中修改后的伪元素使用“::”（两个冒号），即::before和::after——来区分伪元素和伪类（如:hover,:active等）但是，无论您使用单冒号还是双冒号，浏览器都会识别它们。由于IE8只支持单冒号格式，为了保险起见，如果你想要更广泛的浏览器兼容性，那就使用单冒号格式吧！它的作用简而言之，伪元素将在内容元素之前和之后插入额外的元素，因此当我们添加它们时，它们在技术上是相等的，使用以下表示法。
:beforeThisthemaincontent.:after
但是这些元素实际上并不是在文档中生成的。它们在外部可见，但您不会在文档的源代码中找到它们，因此实际上它们是“假”元素。使用伪元素相对容易，:before将在内容之前“添加”一个元素，而:after将在内容之后“添加”一个元素。要在其中添加内容，我们可以使用content属性。例如，下面的代码片段将在引号前后添加一个引号。blockquote:before{content:open-quote;}blockquote:after{content:close-quote;}伪元素样式虽然是“假”元素，实际上伪元素表现得像“真”元素，我们可以添加任何样式对他们来说，比如改变他们的颜色，添加背景颜色，调整字体大小，调整其中的文本等。blockquote:before{content:open-quote;font-size:24pt;text-align:center;line-height:42px；颜色：#fff；背景：#ddd；浮动：左；位置：相对；顶部：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;}指定伪元素的大小由于已经设置了float，所以不需要设置display:black。blockquote:before{content:open-quote;font-size:24pt;text-align:center;line-height:42px;color:#fff;background:#ddd;float:left;position:relative;top:30px;border-radius:25px;height:25px;width:25px;}blockquote:after{content:close-quote;font-size:24pt;text-align:center;line-height:42px;color:#fff;background:#ddd;float:right;position:relative;bottom:40px;border-radius:25px;height:25px;width:25px;}相关背景图片我们也可以用图片代替纯文本来代替内容。虽然content属性提供了url()来插入图片，但在更多的情况下，我更喜欢使用background（背景）属性来更好地控制图片。blockquote:before{content:"";font-size:24pt;text-align:center;line-height:42px;color:#fff;float:left;position:relative;top:30px;border-radius:25px;背景：url(images/quotationmark.png)-3px-3px#ddd；显示：块；高度：25px；宽度：25px；}blockquote：{content:"";font-size:24pt;text-align:center;line-height:42px;color:#fff;float:right;position:relative;bottom:40px;border-radius:25px;background:url(images/quotationmark.png)-1px-32px#ddd;display:block;height:25px;width:25px;}但是，正如您从上面的代码片段中看到的，我们仍然声明了content属性，这次使用的是空字符串。content属性是必需的，应该始终应用。否则，伪元素无论如何都不会起作用。组合伪类虽然有不同类型的伪X（伪元素、伪类），但我们可以将伪类与伪元素一起使用到单个CSS规则中，例如，如果我们希望引号出现在我们的鼠标在一个块上qoute的背景颜色可以稍微变暗。blockquote:hover:after,blockquote:hover:before{background-color:#555;}添加过渡效果我们甚至可以在伪元素上应用过渡属性来创建漂亮的颜色过渡。过渡：all350ms；-o-过渡：all350ms；-moz-transition:all350ms;-webkit-transition:all350ms;更多灵感为了激发您的灵感，我们选择了三个可用于网页设计的很酷的示例为您提供很多创意。迷人的阴影(http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)在本教程中，PaulUnderwood解释了如何创建更加逼真和吸引人的阴影效果。使用伪元素:before和:after。它们都是绝对定位的，并使用负z-index将它们放置在图像后面以进行阴影处理。3D按钮这是一个非常巧妙的实现，它使用伪元素结合CSS3box-shadow仅使用CSS和单个锚文本绘制出令人惊叹的3D按钮。伪元素：before用于在按钮左侧添加数字“1”。叠加图像效果也可以仅使用使用伪元素的图像标签来创建“凌乱”的叠加图像效果。伪元素用于通过使用负z-index值使真实图像后面的“叠加”图像来创建图像叠加的错觉。结论伪元素很酷也很实用。基本上，我们添加的每一个元素都不会干扰现有的HTML结构，而伪元素几乎可以做到我们能想到的一切。其实伪元素也有一些改进，目前正在一步步进行，比如nesteddiv::before::before{content:”;}和多个伪元素div::before(3){content:”;}.显然，在未来的网页设计中，这些改进会让我们的设计有更多的形式（更多的可能性）。不过，它们会在最新的浏览器中得到支持，所以让我们耐心等待吧！