Можно ли контенту псевдоэлемета css задать повторение?

Допустим, есть код:
div { position: relative; background: blueviolet; height:100px; } div:before { content: 'продано'; color: white; }

Хочу заполнить весь див одинаковым элементом, чтобы было так:
div { position: relative; background: blueviolet; height: 100px; } div:before { content: 'продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано '; color: white; }

Можно ли контенту задать что-то вроде repeat-content, чтобы не писать все повторения вручную? К тому же размер дива заранее неизвестен.
UPD Хотелось бы получить кроссбраузерное решение.

Ответ

С css-переменными можно довольно быстро увеличивать контент (удвоение на каждую переменную):
div { position: relative; background: blueviolet; height: 100px; overflow: hidden; } div:before { --a: "продано"; --b: var(--a) " " var(--a); --c: var(--b) " " var(--b); --d: var(--c) " " var(--c); --e: var(--d) " " var(--d); --f: var(--e) " " var(--e); --g: var(--f) " " var(--f); --h: var(--g) " " var(--g); content: var(--h); color: white; display: block; }

Кстати, можно заметить, что такое удвоение по сути даёт нечто типа двоичной системы счисления, что позволяет точно задать число повторений. Например, для 21 повторения надо использовать 16 + 4 + 1:
div { position: relative; background: blueviolet; height: 100px; overflow: hidden; } div:before { --a: "продано"; /* 1 */ --b: var(--a) " " var(--a); /* 2 */ --c: var(--b) " " var(--b); /* 4 */ --d: var(--c) " " var(--c); /* 8 */ --e: var(--d) " " var(--d); /* 16 */ content: var(--e) " " var(--c) " " var(--a); color: white; display: block; }

Ну и, конечно же, можно вместо двоичной использовать любую другую подходящую систему. Для тех же 21 можно сделать (3 * 2 + 1) * 3:
div { position: relative; background: blueviolet; height: 100px; overflow: hidden; } div:before { --a: "продано"; /* 1 */ --b: var(--a) " " var(--a) " " var(--a); /* 3 */ --c: var(--b) " " var(--b) " " var(--a); /* 7 */ content: var(--c) " " var(--c) " " var(--c); /* 21 */ color: white; display: block; }