H2 / H3 헤딩태그 샘플 – 이쁘고 독특한 것 찾는다면 ?

워드프레스 테마를 지금 만들고 있는데 이번에 고민이 되는 것은 H2/H3 헤딩태그를 어떤 것을 할것인지 입니다.

스타일 1 — 하단 그라데이션 라인

/* H2 — 하단 그라데이션 두꺼운 선 */
.entry-content h2 {
font-size: 23px;
font-weight: 700;
color: #1a1a2e;
border: none;
background-image: linear-gradient(90deg, #1a1a2e 0%, #f57d7d 100%);
background-size: 100% 3px;
background-position: bottom;
background-repeat: no-repeat;
padding: 0 0 20px;
margin: 64px 0 32px;
line-height: 1.42;
letter-spacing: -0.02em;
}

/* H3 — 하단 그라데이션 얇은 선 (절반 너비) */
.entry-content h3 {
font-size: 19px;
font-weight: 700;
color: #1a1a2e;
border: none;
background-image: linear-gradient(90deg, #f57d7d 0%, transparent 100%);
background-size: 50% 2px;
background-position: bottom left;
background-repeat: no-repeat;
padding-bottom: 12px;
margin: 48px 0 20px;
line-height: 1.42;
letter-spacing: -0.01em;
}

스타일 2 — 넘버 뱃지 느낌의 배경 블록

/* H2 — 배경 블록 */
.entry-content h2 {
font-size: 23px;
font-weight: 700;
color: #ffffff;
background: #1a1a2e;
border-radius: 6px;
padding: 16px 22px;
margin: 64px 0 32px;
line-height: 1.42;
letter-spacing: -0.02em;
}

/* H3 — 하단 포인트 밑줄 (짧은 선) */
.entry-content h3 {
font-size: 19px;
font-weight: 700;
color: #1a1a2e;
padding-bottom: 12px;
margin: 48px 0 20px;
line-height: 1.42;
letter-spacing: -0.01em;
position: relative;
}

.entry-content h3::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 3px;
background: #f57d7d;
border-radius: 2px;
}

스타일 3. 포인트 라인형

/* H2 */
.entry-content h2 {
font-size: 23px;
font-weight: 700;
color: #1a1a2e;
position: relative;
padding-bottom: 14px;
margin: 64px 0 32px;
line-height: 1.42;
letter-spacing: -0.02em;
border-bottom: 1px solid #e8e8ee;
}

.entry-content h2::after {
content: “”;
position: absolute;
left: 0;
bottom: -1px;
width: 64px;
height: 3px;
background: #f57d7d;
}

/* H3 */
.entry-content h3 {
font-size: 19px;
font-weight: 700;
color: #1a1a2e;
position: relative;
padding-left: 14px;
margin: 44px 0 18px;
line-height: 1.42;
letter-spacing: -0.01em;
}

.entry-content h3::before {
content: “”;
position: absolute;
left: 0;
top: 0.25em;
width: 4px;
height: 1em;
background: #f57d7d;
border-radius: 2px;
}

스타일 4. 미니멀 언더라인

.entry-content h2 {
font-size: 26px;
font-weight: 800;
color: #1a1a2e;
display: inline-block; /* 선이 글자 길이에 맞게 */
border-bottom: 4px solid #1a1a2e;
padding-bottom: 5px;
margin: 64px 0 32px;
}

.entry-content h3 {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
background: linear-gradient(transparent 60%, #f57d7d 40%); /* 형광펜 효과 */
display: inline-block;
padding: 0 4px;
margin: 48px 0 20px;
}