使用伪元素(: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的类,以及设置图标的类,那么下面的代码简洁地说明了使用选择器的CSS3浏览:not()器(这里是小提琴,使用原始的.pseudo类OP用于图标):

.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;
}

如果使用一个类来向右侧或左侧显式设置图标(那么不需要类),CSS2浏览器也可以这样做:iconrighticonlefticonit

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