CSS中的before和:after伪元素应用详解

2020-10-19 17:36 jianzhan

假如你1直紧密关心着各种各样网页页面设计方案的blog,你将会早已留意到了:before和:after伪元素早已在前端开发开发设计中得到了非常多的关心。非常是在Nicolas Gallagher的blog中,后期应用了许多伪类元素。

Nicolas Gallagher应用伪元素用静态数据的HTML标识建立84个GUI标志。

以便填补表明上述內容(和运用当今发展趋势的发展趋势),我搜集1些彻底在伪元素下运作的物品。本文关键对于这1类群体,即早已看到了用伪元素做出了很酷的物品,但想了解全部相关before在css技术性里的应用。

虽然css 标准中包括别的的伪元素,大家聚焦点是 :before 和 :after。因而,以便简单起见,我所说的“伪元素”泛指这两个非常的伪元素。
伪元素能做甚么呢?

“伪元素”,说白了。它建立了1个虚报的元素,并插进到总体目标元素內容以前或以后。

单词“pseudo”是希腊语的英译,它的基础意思是“撒谎的,不诚信的,不正确的。”因而叫伪元素是合适的。由于在文本文档中它不具体更改甚么。相反的,它们是像鬼魂1般的元素插进在css中,她们对客户是可见的,能够根据css操纵。
基础英语的语法

:before 和 :after 伪元素编号十分简易(和大多数数的css特性1样不必须1大堆的前缀)。这里是1个简易的事例。
 

CSS Code拷贝內容到剪贴板
  1. #example:before {   
  2.   content"#";   
  3. }   
  4.     
  5. #example:after {   
  6.   content".";   
  7. }  

这个事例中提到了两件事儿,第1,大家用#example:before和#example:after来总体目标锁住同样的元素.严苛的说,在编码中她们是伪元素。

第2,在內容控制模块中提到,伪元素假如沒有设定“content”特性,伪元素是无用的。

在这个事例中,有着特性id的元素将有1个哈希标记置放內容以前,和1个句号在內容以后。
英语的语法笔记

你能够设定content特性值为空,而且仅仅把他作为1个內容非常少的盒子。像这样:
 

CSS Code拷贝內容到剪贴板
  1. #example:before {   
  2.   content"";   
  3.   displayblock;   
  4.   width100px;   
  5.   height100px;   
  6. }  

但是,你不能以彻底的移除content特性,假如你移除,伪元素将不容易起功效。最少,content特性必须空引入做为它的值(即:content:“”)。

你或许留意到,你还可以用两个冒号(::before 和 ::after) 写伪元素,这个我之前探讨过的。简洁明了的解释是,针对这两种英语的语法沒有甚么不一样,仅仅1点的不一样是,伪元素(双冒号),css3中的伪类是(单冒号)

最终就英语的语法而言。从技术性上讲,你能够广泛的运用伪元素,并不是放在独特的元素上,像这样:
 

CSS Code拷贝內容到剪贴板
  1. :before {   
  2.   content"#";   
  3. }  

尽管上面是合理的,可是它10分的没用。编码会在DOM里的每一个元素的內容以前插进散列标记。即便你删掉了<body>标识和它的全部內容,你仍会在网页页面上看见两个散列标记:1个在<html>里,另外一个在<body>标识里,访问器会全自动建立哪个。
插进內容的特性

正如前面提及的,插进的內容在网页页面的源代码里是不能见的。只能在css里可见

另外,插进的元素在默认设置状况下是内联元素(或,在html5中,在文字词义的种别里)。因而,以便给插进的元素授予高宽比,填充,边距这些,你一般务必显式地界定它是1个块级元素。

这会是对怎样设计方案伪元素的1个扼要的表明,看我下面文字编写器的这幅图

在这个事例中,我高亮度的款式将被运用到元素里插进到总体目标元素內容的前面和后边。

还要留意的是典型的CSS承继标准可用于插进的元素。比如,你有字体样式系列黑体,宋体,无衬线字体样式运用到body元素里,随后伪元素会像别的元素1样承继这些字体样式系列。

一样的,伪元素不容易承继沒有当然承继自父元素(如 padding and margins)的款式。
以前或以后是甚么?

你的判断力是:before和:after伪元素将会是 插进的內容会被引入到总体目标元素的前或后引入。可是,正如上面提到的,并不是这样的。

引入的內容将是相关联的总体目标元素的子元素,但它会被置于这个元素的任何內容的“前”或“后”。

以便证实这1点,看看下面的编码。最先,在HTML:
 

XML/HTML Code拷贝內容到剪贴板
  1. <p class="box">Other content.</p>  

下面是插进伪元素的css:
 

CSS Code拷贝內容到剪贴板
  1. p.box {   
  2.   width300px;   
  3.   bordersolid 1px white;   
  4.   padding20px;   
  5. }   
  6.     
  7. p.box:before {   
  8.   content"#";   
  9.   bordersolid 1px white;   
  10.   padding2px;   
  11.   margin: 0 10px 0 0;   
  12. }  

在此html里,你所看的1段文本带有的是1个类的box,也有这样的文本“Other content”在里边(像你所会看到的1样,假如你看见了主页的源码)。在css中,这段內容被设定了宽度,和1些padding和可见的边框

随后大家有了伪元素。在这个事例中,它是1个散列标记插进到该段內容以前。接着css给了它1个边框和1些padding和margins。

这里是访问器中查询的結果:

外面的盒子是这个段落。紧紧围绕有散列标记的边框表明伪元素的界限。因此,并不是插进“before”到段落,而是伪元素被置于到此段落的“Other content”的前面。
插进非文字內容

我扼要的提示,你能够把特性的值置为空标识符串或是插进文字內容。你基础上有特性的值要包括甚么的两个附加的挑选

最先,你能够包括1个指向1个图象的URL,就像在css里包括1个情况图象1样做你能做的
 

CSS Code拷贝內容到剪贴板
  1. p:before {   
  2.   contenturl(image.jpg);   
  3. }  

留意不可以应用引号。假如你将URL用引号括起来,那末它会变为1个标识符串和插进文字“url(image.jpg)”做为其內容,插进的而并不是图象自身。

自然,你能够包括1个Data URI替代图象引入,正如你能够用css情况1样。

你还能够挑选ATRR(X)中的涵数的方式。此作用,依据标准?,“把X特性的值以标识符串的方式回到”

下面是1个事例:
 

CSS Code拷贝內容到剪贴板
  1. a:after {   
  2.   contentattr(href);   
  3. }  

attr()涵数的作用是甚么?它获得特殊特性的值并把它做为插进的文字变成1个伪元素。

上面的编码会致使网页页面上的每个<a>元素的href值马上被置放在每一个各有的<a>元素的后边。在文本文档挨打印时,它能够用作1个包括全部URl的复印款式表。

你还可以用这个涵数去获得元素的title特性,或乃至是microdata的值。自然,其实不是全部的事例都合乎自身的具体,但依据不一样的状况,1个特殊的特性值做为1个伪元素能够是具体的

但是,获得title或图象的alt的值并做为具体的伪元素显示信息在网页页面上是不能能的。记牢伪元素务必是被运用元素的子元素。图象,这是void(或是空元素),沒有子元素,因此它在这个列子中不能用,一样也可用于别的空元素,比如:<input>。
恐怖的访问器适配性

任何前端开发技术性的发展趋势势头,第1个难题便是访问器的适用。在这类状况之下,它并不是个很大的难题。

访问器适用:before 和 :after 伪元素栈,像这样:

  •     Chrome 2+,
        Firefox 3.5+ (3.0 had partial support),
        Safari 1.3+,
        Opera 9.2+,
        IE8+ (with some minor bugs),
        基本上全部的挪动访问器。

唯1真实的难题是沒有得到适用的(无需怪异)IE6和IE7。因此,假如你的喜好者是在优良适合的web开发设计(或别的具备较低IE版本号的销售市场),你能够再次随意地应用伪元素。
伪元素并不是决策性的

好运的是,缺乏伪元素不容易导致大难题。大多数数状况下,伪元素1般装饰(或协助)內容,不容易给不适用的访问器导致难题。因此,假如你的适用者具备较高的IE版本号,你依然能够在某种水平上应用它们。
1些提示

正如前面提到的,伪元素不容易出現在DOM中。这些元素并不是真实的元素。因而,它们并不是能用的。因此,不必应用伪元素转化成內容,是您的网页页面的能用性和可浏览性的重要。

此外1件必须记牢的是,开发设计专用工具,比如火狐,不必用伪元素显示信息內容。因此,假如应用了,伪元素会导致无法维护保养和调节迟缓。

(升级:在评价中提到的,你可使用谷歌的开发设计专用工具来查询1个伪元素有关联的设计风格,但不容易出現在DOM元素里。另外,火狐在1.8版添加伪元素适用它。)

你所必须用有的理念是用这个技术性以造就出好用的物品。与此另外,未来进1步科学研究CSS伪元素,1定要看看大家早已连接的1些文章内容。

译者手语:全部汉语翻译按照原文路线开展,并在汉语翻译全过程略加了本人对技术性的了解。假如汉语翻译有不对的地方,还烦请同行业盆友指导。感谢!