Tab 水平使用心得及效果

網頁中常會用到水平 tab 來排列，滑鼠移到上方時下方會出現一條底線，這是怎麼做到的呢? 讓我們看下去吧....

HTML:
<ul>
<li><a href="#intro">INTRO</a></li>
<li><a href="#">PRO</a></li>
<li><a href="#flip-3d">3D-FLIP</a></li>
<li><a href="#slide">SLIDE</a></li>
<li><a href="#switch">SWITCH</a></li>
<li><a href="#water-fill">WATER FILL</a></li>
</ul>

PS: CSS 中要將 list 中的黑點去掉可用 list-style:none (自己常會忘記.. 那就寫下來吧)


SCSS:

ul{
    list-type:none;
   width:500px;
   display:flex;   // 利用 flex 水平排列
   justify-content:space-between;    // 平均分配空白

   li{
        a{
               text-decoration:none;  //  隱藏底線

               &:after{
                     content:'\00a0';  // 寫入底線
                     height:2px;  // 底線高度
                     display:block;   // 利用 block 特性顯示到下方
                     width: 100%;
                     background:transparent;  // 隱藏顏色，否則就漏餡了 ^^
               }

              &:hover:after{
                     top:3px;
                     background-color:#F00;
              }
        }
   }
}