IT

CSS 텍스트 장식 밑줄 색상

lottoking 2020. 8. 31. 08:08
반응형

CSS 텍스트 장식 밑줄 색상 [중복]


가능성 가능성 :
밑줄 색상 변경

텍스트 아래에있는 선 색상 만 사용 가능한가요? 아래에 파란색 선이있는 빨간색 글자와 같은 것을보고 싶지만 작업을 수행하는 방법을 수 없습니다.


(동료 Google 직원의 경우 두 번 질문 에서 복사 ) 이 답변 은 현재 대부분의 최신 브라우저에서 text-decoration-color 를 지원 하고 구식 입니다.


필요할 때마다 필요한 것이 준비되어 있습니다.

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

텍스트를 다음과 같이 범위로면 할 수 있습니다.

a {
  color: red;
  text-decoration: underline;
}
span {
  color: blue;
  text-decoration: none;
}
<a href="#">
  <span>Text</span>
</a>


내가 아는 불가능하지만 다음과 같이 시도해 볼 수 있습니다.

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}
<div>
    <span class="underline">hello world</span>
</div>


선의 색상을 설명 수 없습니다 (동일한 요소에 대해 다른 전경색을 만들 수 있습니다 텍스트와 장식이 단일 요소를 형성합니다). 그러나 몇 가지 트릭이 있습니다.

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

또한 다음과 같은 방법으로 멋진 효과를 만들 수 있습니다 .

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/12804419/css-text-decoration-underline-color

반응형