Можно ли контенту псевдоэлемета css задать повторение?
1,00
р.
Допустим, есть код:
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 }
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 }
