글을 읽을때, 저는 아예 다른 사이트로 링크가 있다면 누르기가 좀 꺼려집니다. 글이 짧다면 글을 다 읽고 따로 열거나, 글이 길다면 중간에 새 탭으로 열어두곤 합니다. 이럴때, 보기 좋게 외부링크인걸 표기하면 어떨까요? 정말 간단하게 CSS 한줄이면 외부링크를 표기할 수 있습니다.
아래 링크를 보시면 제 블로그 링크에는 링크모양 이모지가 안붙고,
외부링크에만 이모지가 링크 뒤에 따라다니는 것을 보실 수 있을겁니다.
- #Ludens – http://ludens.kr
- Instagram – http://instagram.com/ludensk
비밀은 바로 아래 적힌 CSS 한줄입니다.
위의 코드를 복사하셔서 적당하게 수정해주시면 되겠습니다.
.article은 글을 감싸고있는 상위 요소로 바꿔주시고address.com은 적용할 사이트 주소로 바꾸신 후- 저처럼 뒤에 스타일을 적용하실거면
:after을 살려두시고(앞을 꾸미실거면:before로 바꾸시고) - 원하는 CSS 스타일을 적용하시면 됩니다.
어떤 원리일까?
CSS를 하나하나 뜯어보면 이해가 되실겁니다.
.article– 먼저 ‘article’이라는 속성을 가진 요소 안에a– ‘a’ 태그들 중a[href*="//"]– ‘href’ 속성에 ‘//’이라는 문자를 포함하는 것을 찾습니다.:not([href*="address.com"])– 그리고 ‘:not’이라는 선택자로 그 중에서 ‘href’속성에 site.address.com이 포함되지 않은 링크만 골라냅니다.
그러면 결국 외부링크만 남게되겠죠? 🙂