How can I repeat CSS pseudo-element?

Question

I have code:

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

div:before {
  content: 'sale';
  color: white;
}

<div></div>

I want to fill the div with pseudo-element:

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

div:before {
  content: 'sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale ';
  color: white;
}

<div></div>

Can I do this with something like repeat-content? I dont want to repeat the word manually and the div is responsive.

Possible duplicate of How to repeat an item multiple times in HTML or CSS? — user3151675
– user3151675, Commented Aug 22, 2017 at 9:08
@the4kman, No, Don't want to make the same, so I can have too many words, it is not only 5 stars. Read the question carefully before putting a minus sign! I am asking about multiple repetitions — kizoso
– kizoso, Commented Aug 22, 2017 at 9:12

Ilya Streltsyn · Accepted Answer · 2017-08-22 09:12:26Z

6

No, there is no such thing as "repeat-content" or something similar in CSS. Your second snippet is the only way to achieve this effect now. Such repetition would be gzipped well, though.

In theory, there is the element() function in CSS that makes it possible to use one HTML element (but not pseudo element) as a background for another (including repeating background). Unfortunately, it is supported only in Firefox.

answered Aug 22, 2017 at 9:12

Ilya Streltsyn

13.6k2 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I repeat CSS pseudo-element?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related