Demo: The local-link pseudo-class

From the W3C spec:

The :local-link pseudo-class allows authors to style hyperlinks based on the users current location within a site and to differentiate site-internal versus site-external links.

The (non-functional) :local-link pseudo-class represents an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL. Any fragment identifiers are stripped before matching the document's URL against the link's URL; otherwise all portions of the URL are considered.

Links

Local link should appear blue while external links should appear red (danger!)

When the window is larger than 700px, local links should also be bold and with a yellow backgrond.

• Alpha
• Bravo
• Charlie
• Delta
• Echo
• Foxtrot
• Golf
• Hotel
• India
• Juliet

The CSS

a {
  color: blue;
}

a:local-link {
  color: green;
}

@media (max-width: 700px) {
  a:local-link {
    background-color: yellow;
    font-weight: bold;
  }
}