[css]형광펜효과- 가상클래스활용

 

 

형광펜 효과는 텍스트를 강조하기 좋은 스타일 이예요.

가상클래스를 활용해서 간단하게 원하는 곳에 형광펜 효과를 줄 수 있습니다. 

 

사용된 CSS 

- 형광펜 효과 :  가상클래스 : before

- 서체 변경 : 웹폰트 

- 그래디언트 컬러 배경 : background:linear-gradient (to right, yellow 0%, lightblue 100%)

- 여백 활용 : white-space : pre-line 

 

html 

<div class="wrap">
  <span class="tit lighter">정호승 / 수선화에게</span>
  울지마라
  외로우니까 사람이다
  살아간다는 것은 외로움을 견디는 일이다
  공연히 오지 않는 전화를 기다리지 마라
  눈이 오면 눈길을 걷고
  비가 오면 빗길을 걸어가라
  갈대 숲에서 가슴 검은 도요새도 너를 보고 있다
  가끔은 하느님도 외로워서 눈물을 흘리신다
  새들이 나뭇가지에 앉아 있는 것도 외로움 따문이고
  네가 물가에 앉아 있는 것도 외로움 때문이다
  산 그림자도 외로워서 하루에 한 번 씩 마을로 내려온다
  종소리도 외로워서 울려 퍼진다.
</div>

 

css

/* 웹폰트 불러오기 */
@font-face {
    font-family: 'KCCChassam';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.wrap{
  font-family: 'KCCChassam';
  padding-left:20px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing:-0.2px;
  white-space:pre-line;  /* html 줄바꿈 그대로 적용 */
}
.tit{
  font-size: 30px;
  margin-bottom: 20px;
}
.lighter{
  display: inline-block;
  position: relative;
}
.lighter:before{
  content: "";
  position: absolute;
  display: inline-block;
  bottom: 2px;
  width: 100%;
  left: 0;
  background: linear-gradient(to right, yellow 0%, lightblue 100%); /* 그래디언트 컬러 */
  height: 50%;
  z-index: -1;
}

 

result

도움이 되셨길 바랍니다! 
형광펜 css 효과와 관련하여 
추가로 아래와 같은 효과도 확인해 보세요! 

- 마우스 호버시 형광펜 그어지는 css 효과 

https://lionbum.tistory.com/138