[간단팁] CSS 한줄로 외부링크만 꾸미기

photo by Shutterstock.com

어제 블로그에 적용해본 초간단팁입니다.

아래 보시면 제 블로그관련 링크에는 링크모양 아이콘이 안붙고, 외부링크에는 아이콘이 붙는 걸 보실 수 있을겁니다.

• #Ludens - http://ludens.kr
• Twitter - http://twitter.com/ludensk
• Instagram - http://instagram.com/ludensk

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

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

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

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

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

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

덧) 응용하면 이런것도 가능합니다 → @ludensk