:: 밑줄 제거 :: 첫 번째 문자

Question

첫 번째 문자를 제외한 모든 문자에 밑줄을 긋기 위해 노력하고 있습니다. 나는 성공하지 않고 ::first-letter 통해 첫 번째 편지에서 밑줄을 제거하려고했습니다. 왜 여기서 일하지 않는거야?

<a class="sample underline letter-underline-none" 
    href="https://twitter.com/ryanve" 
>@ryanve</a> 

이 마크 업을 변경하지 않고 어떻게 밑줄을 제거 할 수 있습니까? 이 CSS가 포함 된 I made a codepenhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration에서

.letter-underline::first-letter, 
.underline { 
    text-decoration: underline; 
} 

.letter-underline-none::first-letter, 
.underline-none { 
    text-decoration: none; 
} 

.sample { 
    display: block; 
} 

Answer 1

:

텍스트 장식은 하위 텍스트 요소에 걸쳐 그려집니다. 즉, 요소가 텍스트 장식을 지정하면 , 자식 요소는 장식을 제거 할 수 없습니다.

(강조 광산). 물론, 당신의 경우에는 진정한 자식 요소 (단순히 첫 번째 문자 의사 요소)가 없지만 동일한 논리가 적용됩니다. 말했다

, 일부 실험은 자식 요소가 text-decoration-color을 사용하여 해당 밑줄의 색을 지정하고 (조상의 은폐)의 자신의 밑줄을 추가 할 수 있습니다 제안합니다. 그래서 당신은 잠재적으로 (의도 된 배경 색상을 일치하도록 #FFF 부분을 조정)

.letter-underline-none::first-letter { 
    text-decoration: underline; 
    text-decoration-color: #FFF; 
} 

같은 것을 작성하여, 대부분의 경우, 함께 원하는 시각 효과를 해킹 할 수있다. 나는 그것을 추천 할 것이라고는 생각하지 않지만, —으로 시작하는 모든 밑줄 효과보다 더 어둡게 보인 기묘한 가장자리의 경우가있을 것 같습니다.