[css 활용] 하이라이터, 형광펜 효과 주기

 

주 사용 CSS 요소 

- 가상 선택자 : before, hover 

- background: linear-gradient

- transition

 

 

html

<div class="wrap">마우스를 글자에 올리면 <a href="#" class="highliter yellow"><span>형광펜이 그어지는 효과</span></a>예요. <a href="#" class="highliter gradient"><span>그라디언트 컬러를 줄수도 있어요! :-)</span></a></div>

 

css

body{
  background-image:url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80);
  background-size:cover;
  background-position:center center;
}
.wrap{
  margin:100px 20px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing:-0.2px;
  vertical-align:bottom;
  text-align: center;
}
.highliter{
  color: #222;
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 2;
  vertical-align:bottom;
}
.highliter:before{
  content: "";
  position: absolute;
  display: block;
  bottom:1px;
  left:-100%;
  width: 100%;
  transition:all .5s;
  z-index: 1;
}
    
.highliter.gradient:before{
  background: linear-gradient(to right, #fe88ff 0%, #c2a4ff 100%); 
  opacity:0.5;
  height: 50%;
}
.highliter.yellow:before{
  background: linear-gradient(to right, yellow 0%, yellow 100%); 
  opacity:0.5;
  height: 100%;
}
.highliter:hover{
  font-weight: ;
}
.highliter:hover:before{
  left:0;
}
.highliter span{
  z-index: 2;
  position: relative;
}
a{text-decoration:none}

 

결과 

*result 클릭해 주세요.