CSS3를 사용하여 빨간색 텍스트로 검은색 밑줄을 만드는 방법은 무엇입니까?

텍스트 색상에 영향을 주지 않고 밑줄 색상 변경

제공된 코드 조각에서 HTML 태그를 사용하여 밑줄 텍스트를 생성했습니다. 텍스트 자체는 빨간색이지만 밑줄 색상을 검정색으로 분리하려고 합니다. 이 과제에 대한 CSS3 솔루션을 살펴보겠습니다.

텍스트 장식 색상 소개

CSS3는 이제 텍스트 장식 색상 속성을 도입하여 딜레마를 해결합니다. 이 속성을 사용하면 텍스트 자체에 영향을 주지 않고 텍스트 장식(예: 밑줄)의 색상을 조작할 수 있습니다.

빨간색 텍스트로 검은색 밑줄 만들기

원하는 출력을 얻으려면 다음 CSS 속성을 구현하세요.

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

이 CSS를 다음과 같이 HTML 요소에 적용하세요.

<p>black text with red underline in one element - no wrapper elements here!</p>

결과적으로 텍스트는 빨간색으로 유지되지만 밑줄은 검은색으로 표시되므로 추가 래퍼를 사용하지 않고도 원하는 효과를 얻을 수 있습니다.

위 내용은 CSS3를 사용하여 빨간색 텍스트로 검은색 밑줄을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!