형광펜 효과

2022. 5. 6. 08:59CSS

background-color 태그 (형광펜 두께 조절 가능)

<p>cSS로 <span>형광펜 효과</span>내는 법</p>
p {
  font-size: 26px;
  position: relative;
  display: inline-block;
  }
span {
  position: relative;
  display: inline-block;
  background-color: linear-gradient(to top, #FFD84B 40%, transparent 40%);
}

mark 태그 (텍스트높이 100% 두께 / 색상 변경 가능)

<p>cSS로 <mark>형광펜 효과</mark>내는 법</p>
p {
  font-size: 26px;
  }
mark {
  background-color: #ffe6b6;
}