형광펜 효과 CSS

hover 시 형광펜을 긋는 효과를 내보자

span{
  background: linear-gradient(to right, transparent 50%, #ddbdd5 50%) ;
  background-size: 200%;
  font-weight: 700;
  transition: .35s;
}

span:hover{
  background-position: -100%,0;
}

1.
background에서 linear-gradient를 이용해 오른쪽으로 절반은 투명, 절반은 원하는 색을 넣어준다

2.
background-size를 이용해 투명한 부분만 보이도록 200%로 지정해준다
(나머지 절반의 색을 넣어준 부분은 보이지 않게 된다)

3.
hover시 background-position에 x축의 -100%를 주어 색상을 입력한 절반 부분이 보이도록 해준다

• 인라인속성(display:inline)이거나 또는 인라인요소(span,a,img..)이여야한 효과를 볼 수 있다