使用伪元素（：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. 如果想要将图标与文字especially if centered重叠，这将更容易实现。

缺点：

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

伪元素

<强>优势（S）：

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

缺点：

1. 每个元素只允许一个（每种类型），所以如果元素上的其他东西需要它，那么你可能会发生冲突。
2. 旧浏览器不支持。
3. 某些元素（replaced elements）无法获取伪元素，因此这甚至不是一个选项。

关于代码长度的讨论

EHLOVader在对该问题的评论中指出，他关注的部分内容是伪元素可能需要的额外编码，而不是背景/填充，如果想要切换到左侧图标。他给了this codepen example。但是，可以使用较少的代码来执行伪元素。假设.iconleft是一个用于将图标左侧而不是右侧的类，而.iconit类是设置图标的类，那么下面的代码简洁地使它成为用于CSS3浏览器使用:not()选择器here is the fiddle，使用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向左显示（无{{}>，则可以使用CSS2浏览器进行 然后需要1}}类）：

iconit

Answer 2

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