CSS 한줄로 외부링크 꾸미기 (간단 팁)

글을 읽을때, 저는 아예 다른 사이트로 링크가 있다면 누르기가 좀 꺼려집니다. 글이 짧다면 글을 다 읽고 따로 열거나, 글이 길다면 중간에 새 탭으로 열어두곤 합니다. 이럴때, 보기 좋게 외부링크인걸 표기하면 어떨까요? 정말 간단하게 CSS 한줄이면 외부링크를 표기할 수 있습니다.

아래 링크를 보시면 제 블로그 링크에는 링크모양 이모지가 안붙고,
외부링크에만 이모지가 링크 뒤에 따라다니는 것을 보실 수 있을겁니다.

• #Ludens – http://ludens.kr
• Instagram – http://instagram.com/ludensk

비밀은 바로 아래 적힌 CSS 한줄입니다.

위의 코드를 복사하셔서 적당하게 수정해주시면 되겠습니다.

1. .article은 글을 감싸고있는 상위 요소로 바꿔주시고
2. address.com은 적용할 사이트 주소로 바꾸신 후
3. 저처럼 뒤에 스타일을 적용하실거면 :after을 살려두시고(앞을 꾸미실거면 :before로 바꾸시고)
4. 원하는 CSS 스타일을 적용하시면 됩니다.

어떤 원리일까?

CSS를 하나하나 뜯어보면 이해가 되실겁니다.

1. .article – 먼저 ‘article’이라는 속성을 가진 요소 안에
2. a – ‘a’ 태그들 중
3. a[href*="//"] – ‘href’ 속성에 ‘//’이라는 문자를 포함하는 것을 찾습니다.
4. :not([href*="address.com"]) – 그리고 ‘:not’이라는 선택자로 그 중에서 ‘href’속성에 site.address.com이 포함되지 않은 링크만 골라냅니다.

그러면 결국 외부링크만 남게되겠죠?