您可以将星形放置为元素的重复背景图像;并通过CSS调整元素的宽度。

.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>

按如下方式使用content属性：

• • 注意：**如果不是有效的html标记，则不建议使用 * repeat *，请使用 * div 、 span * 或 * a *。
• • 第一个e第一个f第一个x

使用SCSS或LESS生成如下样式表。

• • 中央支助组：**

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

• • 超文本标记语言：**

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

如果您愿意使用jQuery（或者只使用javascript但使用不同的代码），您可以：

$(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');
   });
 });

然后当你

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

它将成为

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

试试看：

body{
 counter-reset: Counter;
}

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

或者更简单：

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

不同的浏览器不知道sameTypeElement的同级关系，但必须与选择器类型的任何嵌套级别一起使用

如果你只想打印星星一定次数，你可以使用JavaScript：

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

将导致：★★★★★
如果希望能够访问特定的Star，则需要将每个Star Package 在一个span中，并为其提供唯一的id：

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

这将导致：

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

在JS中：

const stars_parent = document.getElementById("stars-parent-id")
for (let j = 1; j <= number_stars ; j++){
   stars_parent.innerHTML += '<div key={j}>★</div>
}