내 사이트의 외부 링크를 시각적으로 어떻게 나타낼 수 있습니까?

Question

CSS를 사용하면 어떤 링크가 다른 사이트를 가리키는 지 시각적으로 표시 할 수 있습니까?

<a href="/dir/page.htm">My Page</a> 
//and external... 
<a href="http://www.google.com">External</a> 

그럼 당신은 할 수 :

Answer 1

CSS3는 다르게 외부 링크 스타일을 수있는 옵션 (이 IE6를 제외) 인 경우는, 당신의 라인은 내가 무엇을 의미하는 것은 당신의 연결은 다음과 같이이다, 절대 상대하지 있습니다 제공 이 같은 다른 외부 링크 스타일을 위해 CSS3 attribute selectors를 사용

a { color: blue; } /* Internal links */ 
a[href^=http] { color: red; } /* External Links */ 

You can see an example of this working here이는 속성 "시작-와"선택이 규칙과 스타일을 얻을 것이다 href="http...."을 가지고 무엇을 사용합니다. 내가 볼 수있는 유일한 대안은 외부 (또는 내부, 둘 중 하나) 링크를 렌더링 할 때 클래스에 연결하거나 자바 스크립트를 통해 동일하게 연결하는 것입니다.

Answer 2

IE6 사용자가 빠져있는 것이 좋으면 포인트 4를 here에서 사용할 수 있습니다. 그렇지 않으면 외부 링크 또는에 jQuery (또는 무엇이든 getElementsByTagName)를 사용하여 수동으로 클래스를 추가하고 href에 "http : //"가 포함되어 있는지 테스트 할 것입니다. 그렇다면 그 요소에 클래스를 추가 할 것입니다. 물론, 이것은 자바 스크립트를 기꺼이 사용하려는 경우에만 허용됩니다.