使用偽元素（：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-偽類/