学习使用:before和:after伪元素

时间 2019-11-06

标签学习使用元素繁體版

原文原文链接

若是你一直密切关注着各类网页设计的博客，你可能已经注意到了:before和:after伪元素已经在前端开发中得到了至关多的关注。特别是在Nicolas Gallagher的博客中，后期运用了不少伪类元素。php

Nicolas Gallagher使用伪元素用静态的HTML标签建立84个GUI图标。css

为了补充说明上述内容(和利用当前发展的趋势)，我收集一些彻底在伪元素下运行的东西。本文主要针对这一类人群，即已经看到了用伪元素作出了很酷的东西，但想知道全部有关before在css技术里的运用。html

尽管css 规范中包含其余的伪元素，咱们焦点是 :before 和 :after。所以，为了简便起见，我所说的“伪元素”泛指这两个特别的伪元素。前端

伪元素能作什么呢？

“伪元素”，顾名思义。它建立了一个虚假的元素，并插入到目标元素内容以前或以后。html5

单词“pseudo”是希腊语的英译，它的基本意思是“说谎的，不诚实的，错误的。”所以叫伪元素是适合的。由于在文档中它不实际改变什么。相反的，它们是像幽灵通常的元素插入在css中，他们对用户是可见的，能够经过css控制。css3

基本语法

:before 和 :after 伪元素编码很是简单(和大多数的css属性同样不须要一大堆的前缀)。这里是一个简单的例子。web

 
        #example:before { 
       
        content 
        :  
        "#" 
        ; 
       
        } 
       
        #example:after { 
       
        content 
        :  
        "." 
        ; 
       
        }

这个例子中提到了两件事情，第一，咱们用#example:before和#example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。浏览器

第二，在内容模块中提到，伪元素若是没有设置“content”属性，伪元素是无用的。app

在这个例子中，拥有属性id的元素将有一个哈希符号放置内容以前，和一个句号在内容以后。编辑器

语法笔记

你能够设置content属性值为空，而且仅仅把他当作一个内容不多的盒子。像这样:

 
        #example:before { 
       
        content 
        :  
        "" 
        ; 
       
        display 
        :  
        block 
        ; 
       
        width 
        :  
        100px 
        ; 
       
        height 
        :  
        100px 
        ; 
       
        }

然而，你不能够彻底的移除content属性，若是你移除了，伪元素将不会起做用。至少，content属性须要空引用做为它的值(即:content:“”)。

你也许注意到，你也能够用两个冒号(::before 和 ::after) 写伪元素，这个我之前讨论过的。简短的解释是，对于这两种语法没有什么不一样，仅仅一点的不一样是，伪元素(双冒号)，css3中的伪类是（单冒号）

最后就语法而言。从技术上讲，你能够广泛的应用伪元素，不是放在特殊的元素上，像这样：

 
        :before { 
       
        content 
        :  
        "#" 
        ; 
       
        }

虽然上面是有效的，可是它十分的没用。代码会在DOM里的每一个元素的内容以前插入散列符号。即便你删除了<body>标签和它的全部内容，你仍会在页面上看见两个散列符号：一个在<html>里，另外一个在<body>标签里，浏览器会自动建立哪个。

插入内容的特色

正如前面说起的，插入的内容在页面的源码里是不可见的。只能在css里可见

同时，插入的元素在默认状况下是内联元素（或者，在html5中，在文本语义的类别里）。所以，为了给插入的元素赋予高度，填充，边距等等，你一般必须显式地定义它是一个块级元素。

这会是对如何设计伪元素的一个简要的说明，看我下面文本编辑器的这幅图

在这个例子中，我高亮的样式将被应用到元素里插入到目标元素内容的前面和后面。

还要注意的是典型的CSS继承规则适用于插入的元素。例如，你有字体系列黑体，宋体，无衬线字体应用到body元素里，而后伪元素会像其余元素同样继承这些字体系列。

一样的，伪元素不会继承没有天然继承自父元素(如 padding and margins)的样式。

以前或以后是什么？

你的直觉是:before和:after伪元素多是插入的内容会被注入到目标元素的前或后注入。可是，正如上面提到的，不是这样的。

注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。

为了证实这一点，看看下面的代码。首先，在HTML：

 
        < 
        p 
        class 
        = 
        "box" 
        >Other content.</ 
        p 
        >

下面是插入伪元素的css：

 
        p.box { 
       
        width 
        :  
        300px 
        ; 
       
        border 
        :  
        solid 
        1px 
        white 
        ; 
       
        padding 
        :  
        20px 
        ; 
       
        } 
       
        p.box:before { 
       
        content 
        :  
        "#" 
        ; 
       
        border 
        :  
        solid 
        1px 
        white 
        ; 
       
        padding 
        :  
        2px 
        ; 
       
        margin 
        :  
        0 
        10px 
        0 
        0 
        ; 
       
        }

在此html里，你所看的一段文字带有的是一个类的box，还有这样的文字“Other content”在里面（像你所会看到的同样，若是你看见了首页的源代码）。在css中，这段内容被设置了宽度，以及一些padding和可见的边框

而后咱们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容以前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中查看的结果：

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。因此，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。

插入非文本内容

我简要的提醒，你能够把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你能够包含一个指向一个图像的URL，就像在css里包含一个背景图像同样作你能作的

 
        p:before { 
       
        content 
        :  
        url 
        (image.jpg); 
       
        }

注意不能使用引号。若是你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”做为其内容，插入的而不是图像自己。

固然，你能够包含一个Data URI代替图像引用，正如你能够用css背景同样。

你还能够选择ATRR(X)中的函数的形式。此功能，根据规范?，“把X属性的值以字符串的形式返回”

下面是一个例子：

 
        a:after { 
       
        content 
        :  
        attr 
        (href); 
       
        }

attr（）函数的功能是什么？它获得特定属性的值并把它做为插入的文本成为一个伪元素。

上面的代码会致使页面上的每个<a>元素的href值当即被放置在每一个各自的<a>元素的后面。在文档被打印时，它能够用做一个包含全部URl的打印样式表。

你也能够用这个函数去获取元素的title属性，或者甚至是microdata的值。固然，并非全部的例子都符合本身的实际，但根据不一样的状况，一个特定的属性值做为一个伪元素能够是实际的

然而，获取title或者图像的alt的值并做为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，因此它在这个列子中不可用，一样也适用于其余空元素，例如：<input>。

可怕的浏览器兼容性

任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种状况之下，它不是个很大的问题。

浏览器支持:before 和 :after 伪元素栈，像这样：

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎全部的移动浏览器。

惟一真正的问题是没有得到支持的（不用奇怪）IE6和IE7。因此，若是你的爱好者是在良好合适的web开发（或者其余具备较低IE版本的市场），你能够继续自由地使用伪元素。

伪元素不是决定性的

幸运的是，缺乏伪元素不会形成大问题。大多数状况下，伪元素通常修饰（或者帮助）内容，不会给不支持的浏览器形成问题。因此，若是你的支持者具备较高的IE版本，你仍然能够在某种程度上使用它们。

一些提醒

正如前面提到的，伪元素不会出如今DOM中。这些元素不是真正的元素。所以，它们不是可用的。因此，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

另一件须要记住的是，开发工具，例如火狐，不要用伪元素显示内容。因此，若是使用了，伪元素会形成难以维护和调试缓慢。

（更新：在评论中提到的，你可使用谷歌的开发工具来查看一个伪元素相关联的风格，但不会出如今DOM元素里。同时，火狐在1.8版加入伪元素支持它。）

你所须要用有的理念是用这个技术以创造出实用的东西。与此同时，未来进一步研究CSS伪元素，必定要看看咱们已经连接的一些文章。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了我的对技术的理解。若是翻译有不对之处，还烦请同行朋友指点。谢谢！