가운데서 좌우로 펼쳐지게 하기

메뉴를 hover 했을 때 아래에서 underline이 가운데부터 열리는 모션을 구현해 보고 싶어서 만들어봤습니다. 

다음과 같은 모션입니다. 😊

해당 모션은 border 나 text-decoration 으로는 구현할 수없고, a 태그의 :after를 사용하여 만들었습니다. 

<div class="wrap">
	<a href="#">HOME</a>
	<a href="#">ABOUT</a>
	<a href="#">Q&A</a>
</div>

먼저 마크업은 간단합니다. 어차피 :after 를 사용할 꺼라 별다른 태그가 추가로 필요하진 않습니다.

먼저 a:after 에 absolute 속성을 주어 a 보다 아래에 위치시켜줍니다. 

그리고 transform의 scale을 사용 하는게 핵심입니다. 

scale 속성은 현재의 element를 확대 시켜주는 기능을 합니다. 

.wrap {
	padding: 15px;
}
.wrap > a {
	position: relative;
	display:inline-block; 
	color: #000;
	text-decoration: none; 
	font-weight: bold;
	margin-right: 15px;
}

.wrap > a:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 8px;
	bottom: -6px;
	left: 0;
	background-color: #dc6b6b;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.3s ease-in-out;
}

위의 코드를 보면 a:after 의 width가 100%지만, scaleX의 값이 0 이므로 보이지 않습니다. 

가로로 쪼그라들었다고 생각하시면 됩니다. 

 

그럼 a를 hover 했을때 좌우로 늘려주려면, 원래 사이즈인 100%로 돌려주면 되기 때문에 scale 값을 1로 해주면 됩니다. 

그러면 원래 100%의 사이즈로 돌아옵니다. 

 

.wrap > a:hover {
	color: #dc6b6b;
}

.wrap > a:hover:after {
	visibility: visible;
	transform: scaleX(1);
}

 

이렇게 하면 끝입니다. 

해당 모션은 underline 처럼 사용하는 것 외에도 다양하게 사용이 가능해 보입니다. 

 

참고로 scale 은 확인해 보니 IE9 이하는 동작이 안되더라고요. 참고하세요!