星（★）の採点表示のCSS生成

口コミサイトやレビューの評価で使用される星（★）の採点表示をCSSのみで作成することができます。

当ページでは、簡単な操作で星（★）の数や色を指定し、CSSを自動で作成できます。

<div class="rateoya">
  <div class="rate"></div>
</div>

.rateoya {
  height:100px;
}
.rate {
  position:relative;
  font-size:100px;
}
.rate:before {
  position:absolute;
  display:inline-block;
  content:'★★★★★★';
  color:#999999;
  white-space:nowrap;
  top: 0;
  left: 0;
  line-height:1em;
}
.rate:after {
  position:absolute;
  display:inline-block;
  content:'★★★★★★';
  color:#ffff1a;
  white-space:nowrap;
  top: 0;
  left: 0;
  line-height:1em;
  overflow:hidden;
  width:100px;
}