[CSS] 형광펜 밑줄 효과

 

html

<p><span>HIGHLIGHT</span><br /><span>TEXT</span></p>

 

css

 

방법 1 : box-shadow

span {
    /* inset | offset-x | offset-y | color */
    box-shadow: inset 0 -20px 0 #bfffa1;
  }

 

 

방법 2 : background

span {
    background: linear-gradient(to top, #bfffa1 40%, transparent 40%);
  }

 

 

방법 3 : pseudo element

span {
    position: relative;
  }

span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: #bfffa1;
    z-index: -1;
  }

 

 

+ 추가적으로 height, line-height, border-bottom, text-indent 속성 등을 이용해서 상세 위치를 조정하면 된다.