用 CSS 畫出滿意度的星星和特效

相信大家或多或少應該都有遇到要你填滿意度的時候，大概像下面的圖示這樣

當你滑鼠滑過去的時候，星星會從單純的線條變成填滿色的星星，然後當你點擊他的時候，被點擊的以及前面的星星就會保持被填滿色的樣子，大概像下面這樣

以前當我想做出這個特效的時候我都會先寫一些 Class ，然後再使用 Javascript 的 onClick 把 Class 名稱加在星星上，不過最近我學到一個很酷的方式來直接用 CSS 完成而不需要寫 JavaScript ，所以我決定把它紀錄下來！

首先呢，要先寫一些 input 標籤

接著就要開始來寫我們的 CSS 了，首先要先把星星加到偽元素 after 上面，但這個時後畫面上還會有 radio 的圈圈，所以也要一併把它藏起來

.box
  >label
    user-select none
    &:after
      content '☆'
  >input
    display none

星星出來之後，接著要做的就是游標移到星星上要有填色的感覺，讓人覺得點下去之後星星就是這幾顆會亮起來，不過要記得加上 row-reverse 才會讓星星從左亮到右

.box
  display inline-flex
  flex-direction row-reverse
  >label
    user-select none
    &:after
      content '☆'
    &:hover
      cursor point
      &:after
        content '★'
        color #999
      ~label
        &:after
          content '★'
          color #999
  >input
    display none

做好滑鼠移動的特效之後，接著就是點擊的特效，希望點擊第 3 顆的時候，第 1 顆、第 2 顆、第 3 顆星星都要填色

.box
  ...(略)
  >input
    display none
    &:checked
      +label
        &after
          content '★'
          color #666
      ~label
        &:after
          content '★'
          color #666

這樣就大功告成了，是不是很神奇呢！而且這樣寫的好處是程式碼看起來會比較乾淨，因為都寫到 CSS 裡了 XDDD