CSS 문장의 span에 예쁘게 백그라운드(형광펜) 넣기
페이지 정보
조회 146회
작성일 23-10-23 16:31
문장 일부 span에 형광펜처럼 예쁜 백그라운드를 입히는 CSS 방법을 보여주는 CodePen 예제다. span에 배경색과 padding을 적용하고 line-height를 함께 조절해, 줄바꿈이 발생해도 배경이 끊기지 않고 자연스럽게 채워지도록 꾸민다. HTML과 CSS 예제 코드를 제공한다.
HTML
<p> 하늘이 처음 이 세상에서
너의 운명을 정하실 때에 날 미처 모르고
다른 사람을 보내셨기에
<span>우린 이렇게 눈물 남기고 스쳐야 할 인연 인가봐
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
*내가 하늘로 돌아가면 눈물로 천년동안 빌겠어</span>
이 다음 생애엔 꼭 이룰 수 있게 도와 달라고
잠시만 서로 맡기는 거야
사연이 많아 천년 후에야 되찾으러 가는 것뿐야
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
내가 하늘로 돌아가면 눈물로 천년동안 빌겠어
이 다음 생애엔 꼭..이룰 수 있게 도와 달라고 </p>
CSS
p{line-height:170%;}
span{
background:linear-gradient(90deg, #f60, #9c0);
border:1px solid #000;
padding: 0 .5em;
border-radius:.3em;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
DEMO
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.