마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션

안녕하세요 찐망고입니다.

오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요

 

https://hobancf.or.kr/

호반문화재단

호반문화재단 css밑줄 애니메이션

 

 

https://www.yesan.go.kr/chusa.do

추사기념관

추사기념관 css밑줄 애니메이션

 

 

 

저런 밑줄 효과를 주기 전에 기본적으로 css를 이용하면

여러 가지 방법으로 밑줄을 나오게 할 수 있는데요.

아래 네 가지 방법이 있습니다.

1. text-decoration
2. border-bottom
3. ::before나 ::after 사용
4. background-image를 이용한 그라디언트 사용

 

첫 번째 방법인 text-decoration은 텍스트만큼 밑줄이 들어가지만

단점은 텍스트와 밑줄 간의 여백을 지정할 수 없고, 밑줄의 컬러만 변경이 불가하며,

애니메이션도 줄 수 없죠 ㅎㅎ

a요소에 기본적으로 들어가는 밑줄도 바로 이 text-decoration 이죠.

p > span { text-decoration: underline; }

 

 

두 번째 방법인 border는 border-color를 이용하여 글씨와 다른 밑줄색을 넣을 수도

padding을 이용하여 여백을 넣을 수도 있지만 역시 애니메이션을 줄 수 없어요.

그리고 요소가 block이냐  inline-block(inline)이냐에 따라 다르게 들어갈 수도 있죠.

p > span { 
	padding-bottom: 4px;
	border: 1px solid #000; 
}

 

 

 

그래서 많이 이용했던 게 before나 after인 가상 속성인데요.

p {
  width: 40%;
}
p > span {
    position: relative;
}
p > span::after {
    content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 1px;
  background-color: tomato;
  transform: scale(0);
  transition: transform 0.3s;
}
p:hover > span::after {
  transform: scale(1);
}

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

transform을 이용하여 중앙에서부터 밑줄이 나오게 만들어봤어요.

transfrom-origin: left를 추가하면 왼쪽에서부터 밑줄이 나오고요 그러나 중요한 건

한 줄에서 두줄로 변경 시 저렇게 마지막 줄에만 애니메이션이 걸리면서 밑줄이 나온다는 점.

 

 

 

줄 수와 상관없이 밑줄이 나오게 작업하고 싶다라고 하면

마지막 방법인 그러데이션을 이용하면 가능합니다.

잘들어가는 밑줄의 모습

p { 
  width: 40%;
  background-color: tomato;
}
span {
  padding-bottom: 2px;
  background-size: 0 2px;
  transition: background-size 0.5s;
}
p:hover span {  
  background-size: 100% 2px;
  background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-position: left 0 bottom 0;
}

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.