CSS에서 밑줄과 윗줄에 다른 색상을 사용하는 방법은 무엇입니까?

Question

나는 overline 및 underline에 대해 서로 다른 색상을 갖고 싶어, 여기이 현재

p { 
 
    text-decoration: underline overline red; 
 
}

<p> 
 
This is some text 
 
</p>

있습니다.

전혀 가능합니까?

Answer 1

span을 p 안에 넣은 다음 스팬의 overline에 다른 색을 설정할 수 있습니다.

Answer 2

p { 
 
    text-decoration: blue underline ; 
 
} 
 
span { 
 
    text-decoration: red overline; 
 
}

<p><span>This is some text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ut iusto optio, similique iure. Autem facilis, eveniet vel ea mollitia ad obcaecati dignissimos nisi, reiciendis odio voluptas, aliquid iure voluptatibus.</span></p>

은 내가 아는 한 번만 text-decoration-color을 설정할 수있는 모든 장식은 같은 색상이있을 것이다. 사용중인 구문은 현재 Firefox에서만 작동합니다. 다른 브라우저는 -webkit과 같은 접두사가 필요하며 브라우저에서 시험 기능을 사용하도록 설정해야 할 수 있습니다.

훨씬 보편적으로 호환되는 솔루션은 텍스트에 테두리를 적용하는 것입니다. 원하는 효과를 얻을 수 있으며 모든 곳에서 호환됩니다.

p { 
 
    border-top: 1px solid blue; 
 
    border-bottom: 1px solid red; 
 
    display: inline-block; 
 
}

<p>Testing</p>