添加更多內容：前

Question

我用下面的代碼，當用戶將鼠標懸停在圖片上即可創建一個懸停效果：

&:before ' 
content: "example image" 
Background: #444; 
Padding: 20px 
Height: 300px 
Width: 300px 
Font family: 'open sans' 
Opacity: 0; 
' 
&:hover ' 
&:before ' 
Opacity: 1; 

基本上，我想成爲一個讓加，我已經有了文字，加上懸停觸發器時出現的字體真棒圖標。

這怎麼辦？

Answer 1

有一點要記住：img標籤不處理僞元素（除非圖像實際上被破壞）。

但是，如果您想要使用除：：之前的文本以外的圖標，則可以將其應用於僞元素：在同一項目的之後。您可以使用Unicode作爲內容手動設置，FontAwesome可以設置爲字體系列。

這樣的事情（其中f2b9是你fontawesome圖標的Unicode）：

div:after { 
 
    content: "\f2b9"; 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
}