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

95

: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>

스 니펫 확장

— OptimusCrime
소스

글쎄, 당신은 분명히 목록을 원합니다. DIV / P 조합 대신 UL 요소를 사용하십시오. 목록을 사용하면 ... 무료 (... 또는 디스크) 총알을 얻을

— SIME VIDAS

귀하의 경우에 단락 대신 사용자 정의 글 머리 기호가있는 목록을 사용하지 않는 이유는 무엇입니까? 그렇지 않으면 자신을 링크하지 않고 부모 p에 이전 내용을 적용합니다.

— YuS

의 가능한 중복 stackoverflow.com/questions/8536015/...

— 오리올

171

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

예, 인라인 요소의 표시 스타일을 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에게 감사드립니다.}

— Phrogz
소스

2

text-decoration:underline를 사용하여 상위 요소에 적용된를 재정의 할 수 있습니다 display:inline-block. 예제 참조 : jsfiddle.net/aZdhN/1 . 그런 다음 asker의 문제는 다음과 같이 해결할 수 있습니다. stackoverflow.com/a/17347068/1529630

— Oriol

3

내가 볼 수있는 한, 이것은 Internet Explorer (8-10 테스트)에서 작동하지 않습니다. IE를 다루는 방법에 대한 아이디어가 있습니까?

— Linus Caldwell

IE8-11에서도 작동하는 솔루션을 찾았습니다. stackoverflow.com/a/21902566/1607968

— LeJared

53

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>

— 르자 레드
소스

경우했다하면 한 IE8은 밑줄 하이퍼 링크 이미지 만 끌 수있는 <img style="text-decoration:underline">내부 (여기에 키 WAS)<a style="padding:0; border:none;">

— 밥 스테인을

불행히도 jsfiddle은 IE8에서 작동하지 않기 때문에 jsfiddle은 IE8에서 확인할 수 없습니다.

— user2867288

불행히도 IE8에서 여전히 작동하는 온라인 코드 공유 도구를 찾을 수 없습니다. 위의 답변에 코드를 추가하여 html 파일에 붙여넣고 IE8에서 로컬로 열 수 있습니다.

— LeJared

두 가지 다른 상태없이 IE9에서 테스트 및 승인되었습니다.

— saeraphin 2015 년

휴면 상태에서 밑줄이 표시되지 않아야하는 아이콘이있는 링크가 : before에있는 경우, 마우스 오버시 밑줄이 표시되지만 아이콘에는 표시되지 않습니다. 이것이 바로 IE를 설득하기 위해해야 할 일입니다. a {text-decoration : none} a : before {text-decoration : underline} a : before {text-decoration : none} (예, 실제로는 첫 번째 밑줄, 그런 다음 없음으로 덮어 쓰기) a : hover {text-decration : underline} a : hover : before {text-decoration : none}

— Fake Haak

7

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

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

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

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

— 오리올
소스

1

pre-wrap힌트 는 +1 . 내가 사용하고 있었다 content:'►\a0'(\ A0 = & NBSP;)

— Hashbrown

1

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

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

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

— 젖통
소스

좋은 생각. 그것이 내가 전에 한 방법이었습니다. 문제는이 링크가 cms 시스템에서 생성되고 고객이이를 리치 텍스트로 직접 채우는 것입니다.

— OptimusCrime

CMS는 어떤 언어입니까? 링크를 뱉어 낸 다음 브라우저로 보내기 전에 스팬으로 래핑 할 수 있습니까?

— Udders

회사는 modx를 사용하고 있습니다. 마지막 방법으로 할 수있을 것 같지만 정말 무효화하고 싶었습니다. 불가능하다고 생각합니다. 어쨌든 고마워.

— OptimusCrime

-1

대신 사용해보십시오.

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

그럴까요?

— 엘렌
소스

내 div에 단락이있을 수 있으므로 작동하지 않습니다. 좋은 생각이야.

— OptimusCrime

넣어 재미있는 사람 -1 허용 대답은 ... 동일하지만 서로 다른 형태를 제안하는 경우

— 엘렌

-4

이것을 사용하십시오

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

}

— 비핀 찬드라 트리 파티
소스

아무것도하지 않습니다. 텍스트 장식은 무시됩니다.

— OptimusCrime