奇摩電影選單的滑鼠hover時，出現線條特效

by ShadowKao

HTML

<body> 
    <ul>
		<li>
		   <a href="#">AAA</a>
		</li>
		<li>
	     	<a href="#">AAA</a>
		</li>
		<li>
	    	<a href="#">AAA</a>
		</li>
		<li>
             <a href="#">AAA</a>
		</li>
		<li>
		      <a href="#" class="last_a">AAA</a>
		</li>
		 
 </ul>
		 
		 
		 
	</body>

CSS

body{  
	 padding:0;
	 margin:0; 
     /*body負責讓選單水平垂直置中*/
	 height:100vh;
	 display:flex;
	 justify-content:center;
	 align-items:center; 
}
 
ul{
   /*ul預設會有些微的margin、padding*/
	margin:0;
	padding:0;
	list-style:none;  
}
ul > li{  
/*讓選單變成水平的關鍵*/
  float:left;
 
}

ul > li > a
{
	  
	/*a元素預設display:inline;不支援width、height*/
	display:inline-block;
	text-decoration:none;
	width:100px;
	height:50px;
	line-height:50px;/*文字垂直置中*/
	text-align:center;/*文字水平置中*/ 
	border:1px solid #d2d2d2; 
	border-right-width:0px;
	color: #434eae;/*前景色深藍色*/
	 
	position:relative;
  	
	box-sizing:border-box;/*稍微修正偽元素無法蓋滿a元素的問題*/
}

ul> li > a.last_a{
	 
	border-right-width:1px;
}
 


ul > li > a:before
{/*為a插入偽元素*/
	content:"";
	position:absolute; 
	width:100%;
	
	height:3px;/*線條粗細*/
	bottom:0;
	left:0;/*把偽元素移至正確位置，靠左下*/ 
	background: #434eae;/*背景色藍色、線條顏色*/
	 
	 
    /*下面三個property和特效有關*/
	transition:0.5s;/*特效執行時間*/
	transform:scalex(0);/*預設垂直縮放不見*/
	opacity:0;/*預設透明*/
}

ul > li > a:hover:before{
	/*當滑鼠hover時的變化*/ 
	transform:scalex(1);/*垂直縮放恢復原貌*/
	opacity:1;/*變成不透明*/
	
}