형광펜 효과
2022. 5. 6. 08:59ㆍCSS
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;
}
'CSS' 카테고리의 다른 글
드래그&우클릭 방지 (0) | 2022.05.10 |
---|---|
특정 영역만 가로 스크롤 생성 (+스크롤 기능은 하되 스크롤 없애기) (0) | 2022.05.09 |
nth-child() : n번째부터 n번째 까지 (0) | 2022.04.15 |
input type:text 타이핑 시 이벤트 조작 (0) | 2022.04.15 |
이미지에 링크 걸기(+a태그 target속성) (0) | 2022.04.12 |