css 하이라이트 hover , z-index, transition

 css로 밑줄을 넣는 방법은 크게 두가지이다.

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

1. box-shadow

span class="highlight" 긴 글, 그리고 반응형이여서 글이 밑으로 떨어질 수 있는 경우에 적합한 방법이다.

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

원하는 부분에 span으로 감싸 highlight 클래스 적용

:after 형식

 제목글이나 짧은 문구에 highlight를 할때 유용하다.

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

형광펜 애니메이션 적용 hover , z-index,  transition

 

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;
}