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


photo by Shutterstock.com

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

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

비밀은 바로 아래 적힌 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이 포함되지 않은 링크만 골라냅니다.

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

댓글 남기기