CSS投票排行榜圖標是網站中常用的一種元素，用于展示用戶代表的投票數據，同時也能增加頁面的活力和趣味性。下面我們就來介紹一下如何使用CSS實現這種投票排行榜圖標。

.vote {
position: relative;
display: inline-block;
margin-right: 20px;
width: 20px;
height: 20px;
background: #eee;
border-radius: 50%;
}
.vote:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #3498db;
transform: scaleX(0);
transform-origin: left;
}
.vote:after {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease-out;
}
.vote:hover {
cursor: pointer;
}
.vote:hover:after {
opacity: 1;
}
.vote.active:before {
transform: scaleX(1);
}

上述代碼中使用了偽元素:before和:after來分別實現投票描邊和鼠標懸停時的效果。通過設置transform屬性來實現動畫效果，同時利用position屬性等實現圖標的定位和響應用戶的交互。接下來可以通過修改顏色、尺寸和樣式等屬性來自定義更符合網站風格和主題的投票排行榜圖標。