글을 작성할 때 강조하고 싶은 부분이 있을 때 글씨 색을 변경하거나, 밑줄을 적용하곤 한다. 그런데 밑줄을 적용해보면 알겠지만 글씨와 너무 붙어있어 오히려 강조되기 보다는 답답해보인다.
그래서 이러한 부분을 해결하기 위해서 밑줄 CSS를 추가하면 밑줄 두께와 색을 조절하여 해결할 수 있다.
밑줄 CSS 추가 방법은 간단하다.
밑줄 CSS 추가 방법
밑줄 CSS는 차일드테마 편집기를 통해 간단하게 적용할 수 있다.
- 모양 > 테마 파일 편집기
- 아래 CSS 코드 복사 붙여넣기
- 파일 업데이트
/* 밑줄 */
span[style*="text-decoration: underline;"] {
text-decoration: none !important;
display: inline;
box-shadow: inset 0 -7px 0 hsla(53, 90%, 83%, 0.93);
}밑줄의 색상을 변경하고 싶다면 hsla(53, 90%, 83%, 0.93) 부분을 수정하면 된다.
- 첫 번째 값(H)은 색상 → 색 바꾸기
- 두 번째 값(S)은 채도
- 세 번째 값(L)은 밝기
- 네 번째 값(A)은 투명도
물론 아래와 같이 HEX코드 색상으로 변경도 가능하다.
- box-shadow: inset 0 -7px 0 #4a90e2;
이렇게 밑줄 CSS를 추가하고 나면 깔끔하게 글의 일부를 강조할 수 있다.
