CSS3中，我們可以使用偽元素來制作出非常酷炫的星星評分效果！接下來我們就來一起學習一下如何制作吧。

.star-rating {
font-size: 0;
white-space: nowrap;
display: inline-block;
position: relative;
}
.star-rating::before {
content: "\2605\2605\2605\2605\2605";
font-size: 24px;
}
.star-rating::after {
content: "\2605\2605\2605\2605\2605";
color: #f3c131;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 0;
}
.star-rating:hover::after, .star-rating:hover ~ .star-rating::after, .star-rating:checked ~ .star-rating::after{
width: 100%;
}

首先，我們需要將星星評分組件的字體大小設置為0，同時將包裹星星的元素設置為inline-block，以便于在一行內顯示我們的評分效果。

然后，我們需要使用偽元素::before來創建五個空心的星星，用于顯示最終的評分效果。我們可以使用unicode碼來實現星星的顯示。

接下來，使用偽元素::after來創建五個實心的星星，在hover或選中組件的時候，可以通過設置寬度的方式來顯示出對應的評分效果。

做完了，是不是很簡單？趕快去試一試吧！