How to repeat an item multiple times in HTML or CSS?
css, html
Solution
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>
Problem
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: ``` ★★★★★ ```