使用伪元素（：after，：before）与填充/背景定位的好处/缺点？

Question

我正在挖掘我正在使用的网站上的一些旧代码，它使用了iconize 。 它似乎工作的方式是添加这样的类......

a[href=$='.pdf']{
    padding: 5px 20px 5px 0;
    background: transparent url('icon.gif') no-repeat center right;
} 

这样做有什么好处，而不是我做过的方式？ 像这样......

a[href=$='.pdf']:after{
    content: url('icon.gif');
    vertical-align: sub;
}

这是演示他们两个的小提琴......

的jsfiddle

我的问题是......如果有的话，使用伪元素与标准填充和背景定位来附加/预先添加图像到元素有什么好处？

Answer 1

只是一些初始和后来的想法。 我可能还会想到一些补充。

填充/背景

好处）：

1. 适用于IE6-7（即较旧的浏览器）。
2. 如果想要将图标与文本重叠， 特别是如果居中 ，则更容易实现。

劣势（S）：

1. 需要更多的思考来实现（必须计算一些因素）。
2. 对于旧版浏览器，只支持一个背景，因此如果需要另一个背景，则需要解决冲突。
3. 如果浏览器设置为不打印背景图像，则填充的“间隙”仍将存在于打印文本中，但不存在图像。 这可以通过print media css解决。

伪元素

好处）：

1. 更容易实现（无需计算）。
2. 如果需要 ， 它可以有自己的padding ， border ， opacity等 ，就像它是一个真实的元素一样。
3. 与＃2相关，如果需要或需要，它实际上可以移动到元素之外 。
4. 从语义上讲，它以更合适的方式实施。 该图标实际上不是“背景”，但它也不是内容img可能的html的重要部分，因此伪元素符合增强演示文稿的要求，但如果缺少则不会导致问题（在旧浏览器）。
5. 在CSS3浏览器（可能还有CSS2）中，通常可以使用较少的代码在右对齐或左对齐的图标之间切换（请参阅下面的“关于代码长度的讨论”）。

劣势（S）：

1. 每个元素只允许一个（每种类型），因此如果元素上的其他内容需要它，那么您可能会发生冲突。
2. 旧版浏览器不支持。
3. 一些元素（ 替换元素 ）不能采用伪元素，因此这甚至不是一个选项。

关于代码长度的讨论

EHLOVader在对该问题的评论中指出，他关注的部分内容是伪元素可能需要的额外编码，而不是背景/填充，如果想要切换到左侧图标。 他给了这个codepen例子 。 但是，可以使用较少的代码来执行伪元素。 假设.iconleft是一个用于放置图标而不是右边的类，而.iconit是设置图标的类，那么下面的代码简洁地说明了使用:not()选择器的CSS3浏览器（ 这里是小提琴 ，使用OP的原始.pseudo类进行图标化）：

.iconit:not(.iconleft):after,
.iconit.iconleft:before {
    content: url('http://www.jasonapollovoss.com/web/wp-content/uploads/2010/09/pdf_icon_small.png');
    vertical-align: sub;
}

如果使用iconright类将图标显式设置为右侧，或者iconleft在左侧（不需要iconit类），则可以使用CSS2浏览器完成相同的操作：

.iconright:after,
.iconleft:before {
    content: url('http://www.jasonapollovoss.com/web/wp-content/uploads/2010/09/pdf_icon_small.png');
    vertical-align: sub;
}

Answer 2

伪类如此有用的原因在于它们允许您动态地设置内容样式。 在上面的示例中，我们可以描述当用户与它们交互时如何设置样式链接。 正如我们将看到的，新的伪类允许我们根据文档在其中的位置或状态动态设置内容样式。阅读更多内容http://coding.smashingmagazine.com/2011/03/30/how-to-use -css3-伪类/