css로 형광펜 효과 만들기 (highlight효과)

요즘은 css로 약간의 아날로그 감성을 나타내는게 대세인듯 하다.
아래와 같이 노트에 형광펜을 그은 듯한 시안을 많이 받는다.

내가 받은 시안.png

그래서 오늘은 형광펜 같은 효과를 넣는 css를 만들어보자!
이런식으로 css로 밑줄을 넣는 방법은 크게 두가지이다.

1. box-shadow 형식
   첫번째로는 위의 이미지와도 같이 긴 글, 그리고 반응형이여서 글이
   밑으로 떨어질 수 있는 경우에 적합한 방법이다.

.highlight{
  display: inline;
  box-shadow: inset 0 -10px 0 #D9FCDB; 
  /*-10px은 highlight의 두께*/
}

위와같이 css에 .highlight 클래스를 만들어주고
html에서 원하는 부분에 span으로 감싸 highlight 클래스를 줘보자.
위의 사진과 같은 효과를 볼 수 있을 것이다.

1. :after 형식
   두번째로는 가상셀렉터인 after를 활용해서 넣는 방법이다.
   이 방법은 제목글이나 짧은 문구에 highlight를 할때 유용하다.

.highlight:after{
  content:"";
  width: 0;
  height: 10px;
  display: inline-block;
  background: #D9FCDB;
}

여기까지는 정적으로 밑줄을 만들어 내는 css이다. 아까 위에 소스가 훨씬 간단한데 이렇게 가상셀렉터로 쓰는 이유는 따로 있다. 여기에 몇가지만 더하면 마우스 오버 시 형광펜을 치는 모션을 만들어 낼 수 있기 때문이다.

<div>
  사람들은 희망보다는 절망에 더 익숙하다. <br>
  그래서 대개는 <span class="highlight">희망적인 메시지</span>보다는<br>
  <span class="highlight">부정적인 메시지</span>에 훨씬 쉽게 그리고 즉각적으로 반응한다. 
</div>

저 div에 마우스를 넣으면
highlight에 밑줄이 쳐지게 해보자.

div{cursor: pointer;}
div:hover .highlight:after{
  width:100%;
}
.highlight{
  display: inline-block; 
  position: relative;
}
.highlight:after{
  content:"";
  width: 0;
  height: 10px;
  display: inline-block;
  background: #D9FCDB;
  position: absolute;
  bottom:0;
  left:0;
  z-index:-1;
  transition: 0.2s all;
}

See the Pen css-highlight-2 by bomee (@bomee) on CodePen.

이렇게 써주면 css만으로도 마우스 올렸을 때 인터렉티브한 모션을 만들 수 있다.
잘 안된다면 아래 첨부한 코드펜 소스를 뜯어보도록 하자.
오늘은 여기까지, 그럼 안녕🙋‍♀️