/* href 속성의 값 중에서
   "#"이라는 값으로 시작하는 모든 요소를 선택합니다. */
[href^="#"] {
    background-color: darkblue;
    color: white;
}
[href^="#"]::after {
    content: " 👇";
}
<p>다음의 링크를 참조하세요.</p>
<ul>
    <li><a href="#subject-1">주제-1</a></li>
    <li><a href="#contact">연락</a></li>
    <li><a href="https://example.com/">Example Domain</a></li>
</ul>
실제 적용된 모습
[href^="#"] {
    background-color: darkblue;
    color: white;
}

/* 다음과 같이 작성해도 동일합니다. */
[href^='#'] {
    background-color: darkblue;
    color: white;
}
/* href 속성의 값 중에서
   ".html"이라는 값으로 끝나는 모든 요소를 선택합니다. */
[href$=".html"] {
    background-color: darkblue;
    color: white;
}
[href$=".html"]::after {
    content: " 📗";
}
<p>다음의 링크를 참조하세요.</p>
<ul>
    <li><a href="home.html">홈</a></li>
    <li><a href="contact.html">연락</a></li>
    <li><a href="https://example.com/">Example Domain</a></li>
</ul>
실제 적용된 모습