CSS href 속성 선택자 사용법

<ul>
  <li><a href="#top">TOP</a></li>
  <li><a href="https://developer.mozilla.org">mozilla</a></li>
  <li><a href="https://example.com">example</a></li>
  <li><a href="https://www.yahoo.co.jp">yahoo</a></li>
</ul>

/* 전방 일치: "#" 으로 시작 */
a[href^="#"] {
  color: fuchsia;
}

/* 후방 일치: ".org" 으로 끝남 */
a[href$=".org"] {
  color: orange;
}

/* 부분 일치: "example" 을 포함 */
a[href*="example"] {
  color: red;
}

/* 복합 조건: "https" 로 시작하고 ".jp" 로 끝남 */
a[href^="https"][href$=".jp"] {
  color: green;
}

/* ".pdf" 도 ".PDF" 도 매치 */
a[href$=".pdf" i]::after {
  content: " (PDF)";
}

/* 외부 링크（http/https）만 대상 */
a[href^="http"]::after {
  content: " ↗";
}

/* 페이지 내 링크（#）는 제외 */
a[href^="http"]:not([href*="example.com"])::after {
  content: " ↗";
}

/* PDF 링크에 라벨 추가 */
a[href$=".pdf" i]::after {
  content: " [PDF]";
  font-size: 0.75em;
  color: #c00;
}

/* 외부 링크에 화살표 아이콘 */
a[href^="https://"]:not([href^="https://example.com"])::after {
  content: " ↗";
}

/* 앵커 링크는 스타일 없음 */
a[href^="#"] {
  text-decoration: none;
}

a[href^="#"] { }   /* (0, 1, 0) — 클래스와 동일 */
a.internal { }     /* (0, 1, 1) — 클래스 + 요소로 이쪽이 우선 */