层叠样式表(CSS)的重要目标是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是弗成能的。事实上CSS中有一个特点许可我们添加额外元素而不捣乱文档本身，这就是“伪元素”。

你必定据说过这个词，尤其是当你一向存眷着我们的教程。点此浏览原作者的其他文┞仿

事实上，切实其实有一些CSS家族的成员(CSS选择器)被分类为伪元素比如：:first-line, :first-letter, ::selection, :before and :after。然则，就本文而言，我们将把我们商量典范围限制在:before 和 :after这两个元素上。是以，本文中的“伪元素”将特指这两个伪元素(:before 和 :after)，我们将大年夜基本入手，来研究这个独特的主题。

关于语法和浏览器支撑

伪元素实际上在CSS1中就存在了，然则我们如今所评论辩论的:before和:after则宣布于CSS2.1中。在最初，伪元素的语法是应用“:”(一个冒号)，跟着web的成长，在CSS3中修订后的伪元素应用“::”(两个冒号)，也就是::before 和 ::after—以区分伪元素和伪类(比如:hover，:active等)

然而，无论你应用单冒号照样双冒号，浏览器都将能辨认它们。因为IE8只支撑单冒号的格局，安然起见如不雅你想要更广泛的浏览器兼容性那么照样应用单冒号的格局吧!

它是做什么的

简而言之，伪元素将会在内容元素的前后插入额外的元素，是以当我们添加它们时，应用以下的标记方法，他们在技巧上是平等的。

<p> 
 
<span>:before</span> 
 
This the main content. 
 
<span>:after</span> 
 
</p>  

应用伪元素

应用伪元素是相对轻易的，:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以应用content属性。

应用伪元素来仅仅依附一个图片标签创建一个“纷乱的”叠加图像效不雅也是可能的。伪元素用于建立一个图片叠加的错觉，经由过程应用z-index负值使“叠加”的图片在真正的图片后面来实现。

blockquote:before { 
 
  content: open-quote; 
 
} 
 
blockquote:after { 
 
  content: close-quote; 
 
}  

伪元素样式

尽管作为“虚假”的元素，事实上伪元素表示上就像是“真正”的元素，我们可以或许给它们添加任何样式，比如改变它们的色彩、添加配风景、调剂字体大年夜小、调剂它们中的文本等等。

blockquote:before { 
 
content: open-quote; 
 
font-size: 24pt; 
 
text-align: center; 
 
line-height: 42px; 
 
color: #fff; 
 
background: #ddd; 
 
float: left; 
 
position: relative; 
 
top	
			
 1/4    1 2 3 4 下一页 尾页
	
			

　　推荐阅读
　　EPS应急电源的应用常见问题合集
            
            
                
                    
                
                EPS的全称为紧急电力供给，其肩负着在电力不足的间谍作况下供给备用电力的义务。与UPS电源不合，EPS应急电源并>>>详细阅读


本文标题：理解伪元素 :before 和 :after
地址：http://www.17bianji.com/lsqh/36606.html
 1/2    1