Hinzufügen von mehr Inhalt: vor

Question

ich den folgenden Code verwendet habe einen Hover-Effekt zu erzeugen, wenn der Benutzer auf ein Bild schweben:

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

Grundsätzlich mag ich ein let seinen Text hinzuzufügen, die ich schon habe, plus ein font awesome-Symbol, das angezeigt wird, wenn der Hover-Trigger ausgelöst wird.

Wie kann das gemacht werden?

Answer 1

Eine Sache zu beachten: Img-Tag behandelt nicht Pseudo-Elemente (außer wenn das Bild tatsächlich gebrochen ist).

Wenn Sie jedoch ein Symbol zusätzlich zum Text Ihres: vor verwenden möchten, können Sie es auf das Pseudoelement anwenden: nach desselben Elements. Sie können es manuell festlegen, indem Sie Unicode als Inhalt und FontAwesome für eine Schriftfamilie verwenden.

so etwas wie dieses (wo f2b9 ist die Unicode Ihrer fontawesome Symbol):

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