Html+css бейджи с текстом, но не индексируемые поисковыми системами?

Question

[eavy]

Здравствуйте. Нужно сделать много бейджей на странице, примерно таких:


Самый простой способ сделать с помощью <span class="proverka">Популярный вопрос</span>, но их будет такое количество, всё индексируется поисковиками, получится множество дублей.
Можно вставлять изображение, либо svg, но это хочется избежать.

Как еще можно сделать по простому? Чтобы, не разбирающийся человек мог вставить код без заморочек, чем меньше тем лучше.
Подскажите, пожалуйста.

Comments

[Froggyweb]

псевдоэлементом можно
js тоже можно вставить.

[eavy]

Froggyweb, псевдоэлемент то что нужно. Спасибо!

Answer 1

[andand44]

Через before, after. В них можно выводить текст из html кода с помощью data атрибутов
https://jsfiddle.net/va82t9qx/

Comments

[eavy]

Да, то что нужно. Спасибо!