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

Question

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:
★★★★★

Answer 1

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.stack.imgur.com/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>

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

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>