[심화] 텍스트위젯 밑줄 디자인 컬러, 두께 변경 코드 : 콘텐츠핏 브랜딩툴 팁

텍스트 위젯에서 밑줄 기능!

컬러와 두께 변경이 안되서 아쉬우셨나요?

간단한 코드 적용하면

이런 효과 가능합니다!

🔻🔻사용방법🔻🔻

🔻🔻코드 정보 보기🔻🔻

아래 코드를 적용하고 싶은 페이지에 넣으세요.

<style>

.section_wrap {

position: relative; /* 섹션을 위치 상대적으로 설정 */

z-index: 0; /* 섹션의 z-index를 기본값으로 설정 */

}

.section_bg, .section_bg_color {

z-index: -2; /* 배경의 z-index를 낮추어 텍스트와 가상 요소가 상위에 오도록 설정 */

}

u {

position: relative;

display: inline;

text-decoration: none; /* 기본 밑줄 제거 */

}

u::after {

content: '';

position: absolute;

width: 100%;

height: 15px; /* 밑줄 두께 */

background-color: #9ef9fb; /* 밑줄 색상 */

left: 0;

bottom: 6px; /* 텍스트 아래로 밀어내기 */

z-index: -1; /* 밑줄이 섹션 배경 위에 오도록 설정 */

}

</style>

0

아임웹[심화] 텍스트위젯 밑줄 디자인 컬러, 두께 변경 코드