Добавление большего количества контента в: перед тем

Question

Я использовал следующий код для создания эффекта парения, когда пользователи наведения курсора на изображение:

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

В основном я хочу быть пусть добавить текст, который у меня уже есть, плюс шрифт awesome icon, который появляется при запуске триггеров.

Как это можно сделать?

Answer 1

Следует иметь в виду: img tag не обрабатывает псевдоэлементы (кроме случаев, когда изображение фактически сломан).

Но если вы хотите использовать значок в дополнение к тексту вашего: раньше, вы можете применить его к псевдоэлементу : после того же элемента. Вы можете установить его вручную, используя Unicode в качестве контента, и FontAwesome для семейства шрифтов.

что-то вроде этого (где f2b9 является Юникода значка fontawesome):

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