::after 是一个伪元素允许你插入的内容到一个页面的CSS（不需要在HTML）。而最终的结果是不是DOM，它出现在页面的如果是的话，会是这样的：

div::after {
  content: "hi";
}

::before正是相同的只是它插入内容在任何其他内容的HTML代替后。使用哪一个唯一的原因：

• 你要生成的内容来在元素内容，位置。
• 这个后::after内容也是“源命令后，将顶部的位置：：如果互相堆叠自然。

内容的价值可以：

• 一个字符串： 内容：“字符串”；-特殊字符需要特别的编码为Unicode实体。看到符号页。
• 一个图像：内容：URL（/路径/图像.jpg）；-图像插入到它的精确的尺寸和不能调整大小。因为这样的事情梯度实际上是图像，伪元素可以是梯度。
• 什么：内容：”；有利于clearfix和插入图像作为背景图像（设置宽度和高度，甚至可以调整背景大小）。
• 一个计数器： 内容：计数器（李）；-真的有用样式列表直到：标记来。

注意：您不能插入HTML（至少，那将呈现为HTML）。

content: "<h1>nope</h1>";”；

：VS：：

每一个支持双冒号（：：）浏览器也支持CSS3的语法是（：）的语法，但是IE 8只支持单结，所以现在，我们建议只使用最好的浏览器支持单结。

：：是新的书写格式识别伪内容从伪选择器。如果你不需要的IE 8的支持，随意使用双冒号。

相关

• ::first-line
• ::first-letter
• Pseudo Class Selectors

其他资源

• 一大堆很酷的东西，他们能做的
• 在过渡/动画支持图
• 视频介绍
• 使用精灵
• 你不能够动画/过渡在WebKit，但现在你可以。
• Chrome 32 +现在支持伪元素选择和编辑工具。萤火虫的支持以及。

浏览器支持

小问题：

• Firefox 3.5不允许伪元素绝对定位。
• 在Opera 9.2中，空白一直显示在这个伪元素好像预文本
• IE 8不支持z-index他们

原文：https://css-tricks.com/almanac/selectors/a/after-and-before/

转载请注明：TUTERM.COM » ::after 与 ::before使用