CODEWITHSUNDEEP
htmlcss
Village
Village

Reputation: 24413

How to repeat an item multiple times in HTML or CSS?

I need to place a star, ★, on a Web page, repeatedly. Is there a way to specify a symbol and how many times it should appear, in HTML or CSS? E.g., something like this, but not necessarily the same syntax, in which an item is specified, along with a quantity:

<repeat n="5">★</repeat>

This will result in:

★★★★★

Upvotes: 11

Views: 49109

Answers (5)

Dmytro Yurchenko
Dmytro Yurchenko

Reputation: 214

Try:

body{
 counter-reset: Counter;
}

sameTypeElement::after{
  counter-increment: Counter;
  content:counter(Counter) " ★";
}

or simpler:

sameTypeElement::after{
  content:'★';
}

sameTypeElement siblinging is unknown for different browsers, but must work with any level of nesting tiying to type of selector

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272216

You could place the star as a repeating background image of an element; and tweak the width of the element via CSS. Something like:

.stars {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url(https://i.sstatic.net/KaEDC.png);
}
.stars-2 {
  width: 26px;
}
.stars-3 {
  width: 39px;
}
.stars-4 {
  width: 52px;
}
.stars-5 {
  width: 65px;
}
<span class="stars"></span><br>
<span class="stars stars-2"></span><br>
<span class="stars stars-3"></span><br>
<span class="stars stars-4"></span><br>
<span class="stars stars-5"></span>

Upvotes: 7

Jon
Jon

Reputation: 976

If you just want to print the star a certain number of times you can use JavaScript:

for (var i = 0; i < 5; i++) {
    document.write("&#9733");
}

Will result in: ★★★★★

If you want to be able to access a particular star, you will need to wrap each star in a span and give it a unique id:

for (var i = 0; i < 6; i++) {
  document.write("<span id=\"star" + i + "\">&#9733</span>");
}

This will result in:

<span class="star0">★</span>
<span class="star1">★</span>
<span class="star2">★</span>
<span class="star3">★</span>
<span class="star4">★</span>

Upvotes: 0

Waqar Alamgir
Waqar Alamgir

Reputation: 9978

Use content property like this:

Note: that using repeat is not recommended in your case its not a valid html tag, use div, span or a.

Demo

Use SCSS or LESS to generate style sheet like this.

CSS:

<style>
repeat {
    display:block;
}

repeat[n="1"]:before {
   content: "★";
}

repeat[n="2"]:before {
   content: "★★";
}

repeat[n="3"]:before {
   content: "★★★";
}

repeat[n="4"]:before {
   content: "★★★★";
}

repeat[n="5"]:before {
   content: "★★★★★";
}
</style>

HTML:

<repeat n="1"></repeat>
<repeat n="2"></repeat>
<repeat n="5"></repeat>

Upvotes: 5

dave
dave

Reputation: 64657

If you are willing to use jQuery (or just javascript but different code), you could do:

$(document).ready(function() {
  $('[repeat]').each(function() {
     var toRepeat = $(this).text();
     var times = parseInt($(this).attr('repeat'));
     var repeated = Array(times+1).join(toRepeat);
     $(this).text(repeated).removeAttr('repeat');
   });
 });

Then when you have

<span repeat="5">★</span>

It will become 

<span>★★★★★</span>

Upvotes: 3

Related Questions