link state

꼭 a 태그 뿐만 아니라 hover나 active의 경우에는 focus를 받지 않는 일반 div에도 다 동작합니다.
우선 link 상태들에 대한 이해가 필요합니다.

• Link (unvisited): 아무 곳도 방문하지 않은 기본 상태입니다. :link pseudo class.
• Visited: a 태그가 클릭하여 어디를 방문한 경우(브라우저 히스토리가 남은 경우) :visited pseudo class.
• Hover: 마우스 포인터를 해당 요소 위에 올려놓은 경우. 모든 요소가 적용됩니다. :hover pseudo class.
• Focus: focus를 받을 수 있는 요소가 focus되어 있는 경우. 커서가 계속 머무르거나 탭키로 이동 가능한 요소들에 적용됩니다. :focus pseudo class.
• Active: 마우스를 클릭 하고 있는 순간. :active pseudo class.

reset.css

a 태그는 자신의 존재감을 드러내기 위해 기본 css가 많이 있습니다. 우리의 디자인을 입히기 위해서 우선 그 옷을 벗기겠습니다.

a { text-decoration: none; color: inherit; }
a:focus { outline: none; }
a:active, a:visited { color: inherit; }

기본적으로 어디에 연결하기 위해 쓰이기 때문에 cursor가 pointer로 되어 있지만 바꿀 일이 거의 없고, outline은 focus시에만 발생하니 따로 명시적인 표현을 두었습니다. outline이 없는 게 좋은 상태는 아니라고 생각하지만 원하는 디자인을 입히기 위해 우선 제거합니다. 따로 디자인이 없을 경우를 대비해 기본 색이 정해져 있는 active와 visited의 색을 부모의 색으로 상속 받아놓습니다.

reset말고 실제 디자인을 적용할 때는 아래의 순서를 꼭 지켜서 작성해야 합니다. 미묘하게 나눠놓았기에, 순서가 맞지 않으면 의도한대로 동작하지 않습니다.

a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

활용

그 링크에만 적용되는 이미지(예컨데 화살표 같은)를 ::before등의 가상선택자로 해도 되지만, 아래와 같이 백그라운드로 처리할 수도 있습니다.

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}