CSS CSS로 예쁜 밑줄(언더라인) 효과 만들기
페이지 정보
조회 134회
작성일 23-10-23 18:22
텍스트 아래에 예쁜 밑줄 효과를 넣는 CSS 기법을 보여주는 CodePen 예제다. background-image에 linear-gradient를 지정해 밑줄의 굵기·색상·위치를 자유롭게 조절하거나, border-bottom과 text-decoration을 활용해 깔끔한 언더라인을 구현한다. HTML과 CSS 코드를 함께 제공한다.
HTML
<p> 하늘이 처음 이 세상에서
너의 운명을 정하실 때에 날 미처 모르고
다른 사람을 보내셨기에
<span>우린 이렇게 눈물 남기고 스쳐야 할 인연 인가봐
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
*내가 하늘로 돌아가면 눈물로 천년동안 빌겠어
이 다음 생애엔 꼭 이룰 수 있게 도와 달라고
잠시만 서로 맡기는 거야
사연이 많아 천년 후에야 되찾으러 가는 것뿐야</span>
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
내가 하늘로 돌아가면 눈물로 천년동안 빌겠어
이 다음 생애엔 꼭..이룰 수 있게 도와 달라고 </p>
CSS
p{line-height:170%;}
span{
background:linear-gradient(to right, #f60, #9c0) no-repeat right bottom;
background-size:0 2px;
transition:background-size 1s;
}
span:hover{
background-position:left bottom;
background-size:100% 2px;
}
DEMO
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
- 이전글텍스트가 이미지 주변을 감싸도록 배치하기 (float) 24.07.13
- 다음글문장의 span에 예쁘게 백그라운드(형광펜) 넣기 23.10.23