underline

by Kim Ara

HTML

<div class="tab">
  <ul>
    <li class=""><a href="#">클래식</a></li>
    <li class="active"><a href="#">프레쉬 라이트</a></li>
    <li class=""><a href="#">프리미엄</a></li>
    <li class=""><a href="#">아침메뉴</a></li>
  </ul>
</div>

CSS

li{list-style: none;}
a{text-decoration: none;color: #333;}

/* .tab{text-align:center;}
.tab ul{overflow:hidden; display:inline-block;} */
.tab ul li{float:left; padding:0 10px;;}
.tab ul li a{display:inline-block;padding:20px 0 18px 0;position:relative;font-size:13px;color:#999999;font-weight:300;letter-spacing:-0.03em;}
.tab ul li a:after{content:'';position:absolute;left:50%;bottom:12px;height:2px;width:0;background-color:#009223;transition-duration:0.2s;}
.tab ul li.active a{font-weight:bold;color:#009223;}
.tab ul li.active a:after{left:0;width:100%;}

JavaScript

$('.tab ul li').click(function(){

	$(this).addClass('active');
	$(this).siblings().removeClass('active');
});