星級評分是網頁設計和開發中的一種常見元素，可以幫助用戶快速了解特定產品或服務的質量和受歡迎程度。為了實現這一元素，我們可以使用 css 來編寫星級評分代碼。下面我們來看一下如何使用 css 實現星級評分。

.star-rating {
font-size: 24px;
color: #ffcc00;
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
.star-rating:before {
content: '\f005 \f005 \f005 \f005 \f005';
font-family: 'FontAwesome';
font-size: inherit;
color: inherit;
}
.star-rating:after {
content: '\f005 \f005 \f005 \f005 \f005';
font-family: 'FontAwesome';
font-size: inherit;
color: #ccc;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.star-rating span {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 0;
height: 100%;
overflow: hidden;
background-color: #ffcc00;
}
.star-rating:hover span {
width: 100%;
transition: width 0.3s ease-in-out;
}

首先，我們創建一個類名為 .star-rating 的樣式，用于表示整個星級評分元素。我們將其字體大小設置為 24 像素，顏色為黃色。我們在星級評分元素之前添加一個偽元素 ::before，使用 Font Awesome 字體庫中的五個星星符號填充評分元素。我們還添加了一個偽元素 ::after，用于表示灰色星級評分元素。

接下來，我們為 .star-rating 類選擇器添加一個 span 子元素，該元素也是絕對定位的，寬度為 0，高度為 100%，顏色為黃色。當用戶將鼠標懸停在星級評分元素上時，我們使用 css 過渡將 span 元素的寬度從 0 慢慢過渡到 100%。

這樣，一個基于 css 的星級評分元素就完成了，你可以根據自己的需要對其進行定制和擴展。