-
如果你一直密切关注各种网页设计博客，你可能已经注意到，伪元素前后在前端开发中引起了相当多的关注，尤其是在Nicolas Gallagher的博客中，后来使用了许多伪类元素。
Nicolas Gallagher使用一个伪元素创建一个静态HTML标记的84个GUI图标。
为了添加上述内容（并利用当前的发展趋势），我收集了完全在伪元素下运行的东西。
虽然CSS规范中还有其他伪元素，但我们关注的是：前和后。因此，为了简单起见，我所说的伪元素指的是这两个特殊的伪元素。
伪元素能做什么
伪元素，顾名思义，它创建一个假元素，并在目标元素的内容之前或之后插入它。
字pseudo希腊语的英语翻译；其基本含义是撒谎，不诚实，和错误的。因此，它是适当的调用一个伪元素。因为它实际上并没有改变在文件是什么，相反，他们是幽灵般的元素插入到CSS，它们对用户可见的和可控制的CSS。
基本语法
之前和之后：伪元素编码非常简单（因为大多数CSS属性不需要一堆前缀）。
CSS代码将内容复制到剪贴板。
{ #例子：前
内容：# ；
}
{ #例子：后
内容：；
}
这个例子中提到了两件事。首先，我们使用#例子：例子：前、后#目标相同的元素。严格地说，它们是代码中的伪元素。
其次，在内容模块，它提到，如果伪元素不设content属性，伪元素是无用的。
在这个示例中，具有属性id的元素在放置内容之前将有一个散列符号，并且一个周期是在内容之后。
语法笔记
您可以将内容属性的值设为空，并将其视为一个内容很小的框：
CSS代码将内容复制到剪贴板。
{ #例子：前
内容：；
显示块；
宽度：100px；
身高：100px；
}
但是，您不能完全删除内容属性，如果删除它，伪元素将不起作用。至少，内容属性需要一个空引用作为它的值（即，内容：）。
你可能注意到了，你也可以用两结肠写伪元素（：：前、后::::::），我已经讨论过的，短的解释是，这两种语法没有区别，但是唯一的区别是伪元素（双冒号），和CSS3的伪类（单结）。
最后，从语法上讲，从技术上讲，一般可以应用伪元素，而不是像这样的特殊元素：
CSS代码将内容复制到剪贴板。
在{
内容：# ；
}
虽然它是有效的，但它是非常无用的。代码将在DOM中每个元素的内容前面插入散列符号。即使删除了标签及其所有内容，您仍然会看到页面上有两个散列符号：一个在中间，另一个在标签中，浏览器会自动创建。
插入内容特征
如前所述，插入的内容在页面的源代码中是不可见的，只能在CSS中看到。
同时，默认情况下插入的元素是内联元素（或者，在HTML5中，属于文本语义范畴）。因此，为了给插入的元素高度、填充、边缘等，通常需要显式地定义它为块级元素。
这将简要介绍如何设计伪元素，并查看下面的文本编辑器中的图片。
在本例中，我的突出显示样式将应用于插入在目标元素内容前后的元素。
还需要注意的是，典型的CSS继承规则适用于插入的元素。例如，您可以将黑体字、歌曲样式、无衬线字体应用于体元素，而伪元素将继承这些字体系列作为其他元素。
类似地，伪元素不继承不继承父元素的自然继承（如填充和边距）的样式。
前后是什么
您的直觉是在之前和之后：伪元素可以插入到目标元素的前或后，但是，如上所述，它不是。
注入的内容将是相关目标元素的子元素，但它将被放置在元素的任何内容中；。
为了证明这一点，请看下面的代码：
xml代码将内容复制到剪贴板。
其他内容。
下面是插入伪元素的CSS：
CSS代码将内容复制到剪贴板。
p.box {
宽度：300px；
边界：1px的白色固体；
填料：20px；
}
P.box：在{
内容：# ；
边界：1px的白色固体；
Padding: 2px;
保证金：0 10px 00；
}
在这个HTML，你读到的是一个类的盒子，如其他content，里面，你可以看到，如果你看到首页的源代码。在CSS，这部分设置的宽度，以及一些填充和可见的边界
然后我们有一个伪元素。在这个例子中，在散列符号插入到该节的内容之前，CSS给了它一个边框和一些填充和边距。
这是在浏览器中查看的结果：
外箱的段落。一个伪元素表示的边界在哈希符号的框架，而不是插入before的段落，但伪元素放置在本款其他content前；
插入非文本内容
我简要地提醒您，可以将属性值放入空字符串或插入文本内容。
首先，您可以包含指向映像的URL，就像您可以在CSS中使用背景图像一样。
CSS代码将内容复制到剪贴板。
前{
内容：URL（图像JPG）；
}
注意不要使用引号。如果用引号包装URL，它将成为字符串并插入文本URL（图片JPG）作为其内容，插入而不是图像本身。
当然，您可以包含数据URI而不是图像引用，正如您可以使用CSS背景一样。
你也可以选择预先转让风险分配函数的形式（X），这个函数，根据规范，返回X属性的值在一个字符串的形式；
下面是一个例子：
CSS代码将内容复制到剪贴板。
答：{
内容：attr（链接）；
}
该属性的作用是什么（）函数它获取特定属性的值，并将其作为插入文本的伪元素。
上面的代码使每个元素的href值对页面立即放置每个元素后面。文档打印时，它可以作为一个打印样式表包含所有的URL。
你也可以使用这个功能来获取的元素的title属性，甚至是值的数据。当然，不是所有的例子都是与现实一致的，但根据不同的情况，一个特定的属性值可以是实际的作为一个伪元素。
然而，它是不可能得到的标题或图片的alt值并显示在网页作为一个真正的伪元素。记得一个伪元素的子元素必须被应用的元素。这是一个无效的图像（或空元素），没有子元素，所以它是不在这个例子中，也适用于其他空的元素，例如：。
可怕的浏览器兼容性
任何前端技术的第一个问题是浏览器的支持，在这种情况下，这不是一个大问题。
浏览器支持：之前和之后：伪元素堆栈，如下所示：
铬2，
火狐3.5 +（3有部分支持），
Safari 1.3 +，
歌剧9.2 +，
IE8 +（有一些小bug），
几乎所有的移动浏览器。
唯一真正的问题是没有支持（难怪）IE6和IE7。所以如果你的粉丝有很好的和适当的Web开发（或其他市场的低的IE版本），你可以继续使用伪元素自由。
伪元素不是决定性的。
幸运的是，缺少一个伪元素不会造成大问题。在大多数情况下，一个伪元素通常会修改（或帮助）内容，并且不会对不支持的浏览器造成问题。因此，如果您的支持者拥有较高的IE版本，您仍然可以在一定程度上使用它们。
一些提醒
如前所述，伪元素不会出现在DOM中，这些元素不是真正的元素，因此它们是不可用的。因此，不要使用伪元素来生成内容，这是Web页面的可用性和可访问性的关键。
另一件需要记住的事情是，开发工具，如Firefox，不会用伪元素显示内容，因此，如果使用了伪元素，可能会导致维护困难和调试缓慢。
（更新：在评论中，您可以使用谷歌的开发工具来查看伪元素的关联样式，但它不会出现在DOM元素中。同时，Firefox在1.8版中添加了伪元素来支持它。）
您需要使用的是，使用这种技术来创建一些有用的东西。同时，进一步研究CSS伪元素在未来，我们必须看看我们已经联系到的一些文章。
译者的手语：整个翻译是按照原文行进行的，在翻译过程中加入了一些对技术的个人理解。如果翻译错了，也请朋友指教。谢谢。