다양한 CSS 밑줄 효과 소스코드

블로그의 글을 쓰다보면 강조하고 싶은 글들이 있을 경우에 밑줄을 많이 사용하는데요, 형광펜 스타일 또는 에니메이션이 들어가면 조금 더 읽는 사람들에게 재미와 관심을 쓸 수 있지 않을까 생각됩니다. 

그래서 이번 글에서는 블로그에서 사용하면 좋은 밑줄 효과를 주는 CSS 소스코드를 모아봤습니다.

 

1. 형광펜 밑줄 효과

요즘 많이들 사용하는 밑줄 효과인데요, 형광펜으로 밑줄을 그은듯한 느낌의 CSS 스타일입니다. 

세가지 종류을 예로 보여드리겠습니다. 

 

• <mark>태그만 사용한 경우
• CSS의 배경색(background-image)를 사용한 경우
• 형광펜으로 밑의 반만 줄을 그은듯한 효과

 

See the Pen Highlighters by hagisuda (@hagisuda) on CodePen.

 

2. 마우스를 올려 놓으면 밑줄이 그어지는 에니메이션 효과

다음은 마우스오버를 하면 밑줄이 나타나는 에니메이션 효과의 CSS를 모아봤습니다.

• 왼쪽에서 오른쪽으로 이동하는 에니메이션
• 가운데서 좌우로 펼쳐지는 에니메이션
• 형광펜 효과가 위로 올라오는 에니메이션
• 밑줄이 위에서 살짝 떨어지는 에니메이션

 

See the Pen Underline Animation by hagisuda (@hagisuda) on CodePen.

 

읽으면 도움되는 다른 추천글

화면 상단으로 이동하는 버튼(JQuery)

스크롤 페이지 프로그레스바(자바스크립트)

자동으로 블로그 목차 만들어주기(JQuery)

페이스북으로 쇼핑몰 만들기 - 페이스북 샵

흥미로운 다른글들