添加更多内容：之前

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作为font-family。

类似这样的东西（其中 f2b9 是你的fontawesome图标的Unicode）：

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