[html] a : before에서 밑줄 만 제거하는 방법은 무엇입니까?

Program / 글쓴이

:before화살표를 적용하기 위해 를 사용하여 스타일이 지정된 링크 세트 가 있습니다.

모든 브라우저에서보기 좋게 보이지만 링크에 밑줄을 적용 할 때 :before부분 (화살표) 에 밑줄을 붙이고 싶지 않습니다 .

예를 들어 jsfiddle을 참조하십시오 : http://jsfiddle.net/r42e5/1/

이것을 제거 할 수 있습니까? 내가 앉은 테스트 스타일 #test p a:hover:before은 적용되지만 (Firebug에 따르면) 밑줄은 여전히 ​​있습니다.

이것을 피할 방법이 있습니까?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}
<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

스 니펫 확장

답변

이것을 제거 할 수 있습니까?

예, 인라인 요소의 표시 스타일을 display:inline(기본값)에서 display:inline-block다음 으로 변경하는 경우 :

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

이는 CSS 사양에 다음과 같이 나와 있기 때문입니다 .

인라인 요소에 지정되거나 전파되면 해당 요소에 의해 생성 된 모든 상자에 영향을 미치며 인라인을 분할하는 모든 유입 블록 수준 상자에 추가로 전파됩니다 (섹션 9.2.1.1 참조). […] 다른 모든 요소의 경우 모든 유입 하위 요소로 전파됩니다. 텍스트 장식은 부동 및 절대 위치 하위 항목이나 인라인 블록 및 인라인 테이블과 같은 원자 인라인 수준 하위 항목의 내용 으로 전파되지 않습니다 .

(강조 광산.)

데모 : http://jsfiddle.net/r42e5/10/

사양을 확인하고 해결 방법이 합법적인지 확인하도록 유도 한 해결 방법을 제공 한 @Oriol에게 감사드립니다.

답변

IE8-11 에는 버그가 있으므로 display:inline-block;단독으로 사용 하면 작동하지 않습니다.

이 버그에 대한 해결책을 찾았 text-decoration:underline;습니다. : before-content를 명시 적으로 설정 한 다음이 규칙을 다음으로 다시 덮어 씁니다.text-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

여기에서 작업 예 :
http://jsfiddle.net/95C2M/

업데이트 : jsfiddle은 더 이상 IE8에서 작동하지 않으므로이 간단한 데모 코드를 로컬 html 파일에 붙여넣고 IE8에서 엽니 다.

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

답변

:before요소에 다음을 추가하여 수행 할 수 있습니다 .

display: inline-block;
white-space: pre-wrap;

와 display: inline-block밑줄 사라집니다. 그러나 문제는 삼각형 뒤의 공간이 무너지고 보이지 않는다는 것입니다. 이를 수정하려면 white-space: pre-wrap또는 을 사용할 수 있습니다 white-space: pre.

데모 : http://jsfiddle.net/r42e5/9/

답변

링크를 범위로 감싸고 다음과 같이 a : hover의 범위에 텍스트 장식을 추가합니다. 

a:hover span {
   text-decoration:underline;
}

나는 당신이하려는 일로 당신의 바이올린을 업데이트했습니다. http://jsfiddle.net/r42e5/4/

답변

대신 사용해보십시오.

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

그럴까요?

답변

이것을 사용하십시오 

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

답변