Как в контенте псевдоэлемента вставить элемент с определенным классом?

Question

[Norum]

у меня есть span с содержимым и мне нужно после него вставить звезду, как на картинке, но я хочу ее вставить через сайт fontawesome и не хочу скачивать ее. Что мне нужно прописать в :after, чтобы вставить элемент i class="fas fa-star" ?

Comments

[ildar-meyker]

Ээ. Боюсь, вы не смогли объяснить, чего вы хотите.

Возможно, речь о том, чтобы:

span:after {
content: 'текст иконки';
font-family: 'название шрифта';

}

Но подключать font-awesome все равно придется.

Ну или используйте юникод-символ.

[Ankhena]

Так откройте сайт, найдите иконку и посмотрите какой это символ.
Шрифт не забудьте подключить.

[Norum]

ildar-meyker, поясняю: у меня есть span с содержимым
<span>8.8</span>
И мне нужно после этого спана вставить звезду и я хочу это сделать через псевдоэлемент :after

span:after {
...

но я не хочу ее качать с макета, а хочу использовать код с сайта fontawesome.com и мне надо для отображения этой звезды просто вставить код <i class="fas fa-star"></i>, то есть создать этот элемент, но как это сделать через пседвоэлемент- не знаю. Резимируя- что надо прописать в псведвдоэлементе, чтобы создался элемент <i class="fas fa-star"></i> ?
Такое не работает

span:after {
  content: '<i class="fas fa-star"></i>';
}

[Norum]

Ankhena, Так а что надо прописать в псведвдоэлементе, чтобы создался элемент<i class="fas fa-star"></i> ?

[Ankhena]

Norum, так откройте сайт и иконку, над иконкой написаны все варианты вставки на сайт, в том числе и юникод

[Вадим]

Norum, Да не нужен Вам никакой элемент.
Иконка в шрифте это определённый символ.
Такой же как любая буква алфавита.
У каждого символа свой уникальный код.
Выше на скрине Ankhena видно что у этой иконки код f005.
Соответственно

content: '\f005';
font-family: 'font-awesome' // Имя взято из головы. Настоящее название шрифта есть в документации.

[Антон Литвиненко]

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

[Ankhena]

А я бы заинлайнила этот SVG в стили. Нечего ему делать в разметке.

Answer 1

[Алексей Дубровин]

Никак через псевдоэлементы нельзя вставлять дом узлы.
CSS только для задания стилей. он не должен манипулировать с dom