Можно ли контенту псевдоэлемета 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 Хотелось бы получить кроссбраузерное решение.
    

Ответы

Ответ 1

С 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;
}



Ответ 2

Полная жесть с использованием text-shadow:



div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'продано';
  color: white;
  text-shadow:
    8ch 0 0 white, 16ch 0 0 white, 24ch 0 0 white, 32ch 0 0 white, 40ch 0 0 white, 48ch 0 0 white, 56ch 0 0 white, 64ch 0 0 white, 72ch 0 0 white, 80ch 0 0 white,
    0 1.5em 0 white, 8ch 1.5em 0 white, 16ch 1.5em 0 white, 24ch 1.5em 0 white, 32c
1.5em 0 white, 40ch 1.5em 0 white, 48ch 1.5em 0 white, 56ch 1.5em 0 white, 64ch 1.5em 0 white, 72ch 1.5em 0 white, 80ch 1.5em 0 white,
    0 3em 0 white, 8ch 3em 0 white, 16ch 3em 0 white, 24ch 3em 0 white, 32ch 3e
0 white, 40ch 3em 0 white, 48ch 3em 0 white, 56ch 3em 0 white, 64ch 3em 0 white, 72ch 3em 0 white, 80ch 3em 0 white,
    0 4.5em 0 white, 8ch 4.5em 0 white, 16ch 4.5em 0 white, 24ch 4.5em 0 white, 32c
4.5em 0 white, 40ch 4.5em 0 white, 48ch 4.5em 0 white, 56ch 4.5em 0 white, 64ch 4.5em 0 white, 72ch 4.5em 0 white, 80ch 4.5em 0 white;
}



Ответ 3

Гораздо меньшая жесть с фильтром drop-shadow: он позволяет удваивать контент каждым вызовом). Однако, пришлось прописать display: block, чтобы оно верно рендерилось:



div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'продано';
  color: white;
  display: block;
  filter: 
    drop-shadow(8ch 0 0 white)
    drop-shadow(16ch 0 0 white)
    drop-shadow(32ch 0 0 white)
    drop-shadow(64ch 0 0 white)
    drop-shadow(0 1.5em 0 white)
    drop-shadow(0 3em 0 white);
}



Ответ 4

Решение только для Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/element



div {
  position: relative;
  background: red; /* если решение ниже не поддерживается, блок останется красным */
  background: -moz-element(#src) blueviolet;
  background: element(#src) blueviolet;
  height: 100px;
}

#src {
  position: absolute;
  top: -2em;
}

#src:before {
  content: 'продано\A0';
  color: white;
}




Ответ 5

Нет, в стандартах нет такого свойства, просто потому, что :before не для этого предназначен.
Если не хотите использовать JS, то можно прописать overflow: hidden; и content: attr(data-bg-text);
Затем создать спрятанный div где-нибудь в конце документа и прописать свойство data-bg-text со значением 'продано продано ... и так до посинения'. Но думаю, что такой вариант вызовет только боль.
Так что ответ: нет.


Ответ 6

Можно использовать javascript

Вот пример:



div {
  position: relative;
  background: blueviolet;
  height: 216px;
}

div:before {
  color: white;
}