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

Question

у меня есть span с содержимым и мне нужно после него вставить звезду, как на картинке, но я хочу ее вставить через сайт fontawesome и не хочу скачивать ее. То есть, что надо прописать в псведвдоэлементе, чтобы создался элемент

<i class="fas fa-star"></i>

?

Такое не работает

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

Answer 1

Вам надо указывать код иконки, семейство и жирность шрифта.

span::after {
  content: '\f005';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

<span></span>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/regular.min.css" integrity="sha512-d2x1oQUT6HACW9UlXxWI6XrIBDrEE5z2tit/+kWEdXdVYuift7sm+Q6ucfGWQr1F0+GD9/6eYoYDegw2nm05Vw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Answer 2

::before и ::after используют тот же механизм, что и textContent. Они автоматически экранируют специальные символы, такие как <, >, &. Вам надо использовать нативные значения для content, такие как "\f005" (звёздочка). Их можно найти на оффициальном сайте. Или же задать классы спану.

БЛОГ НА HUSL

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

Ответы (2 шт):