CSS에서 텍스트 장식(밑줄, 윗줄 등)의 색상을 변경하려면 text-decoration-color 속성을 사용하면 됩니다. 이 속성은 text-decoration으로 설정한 선의 색상만 별도로 지정할 수 있어, 텍스트 자체의 색상과 장식선의 색상을 다르게 표현할 수 있습니다.
예제 1: 윗줄(overline)에 노란색 적용하기
다음 예제는 텍스트 위에 그려지는 윗줄의 색상을 노란색으로 지정하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
예제 2: 밑줄(underline)에 주황색 적용하기
이번에는 밑줄 스타일에 주황색을 적용해 보겠습니다. text-decoration 값을 underline으로 변경하고, text-decoration-color로 원하는 색상을 지정하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: underline;
text-decoration-color: orange;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
정리
text-decoration-color 속성은 CSS 색상 값(키워드, HEX, RGB, HSL 등)을 모두 지원합니다. 또한 text-decoration-line, text-decoration-style 속성과 함께 사용하면 선의 위치와 모양까지 자유롭게 조절할 수 있어, 링크나 강조 텍스트를 더욱 세련되게 디자인할 수 있습니다.