Styling a skip link

A quick demo showing how to style a skip link.

A link inside the content area

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae laborum, accusamus impedit quis odio, quisquam molestiae? Voluptatem consectetur rerum iste esse corporis eius corrupti laborum dolorem voluptates, saepe molestias explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae laborum, accusamus impedit quis odio, quisquam molestiae? Voluptatem consectetur rerum iste esse corporis eius corrupti laborum dolorem voluptates, saepe molestias explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae laborum, accusamus impedit quis odio, quisquam molestiae? Voluptatem consectetur rerum iste esse corporis eius corrupti laborum dolorem voluptates, saepe molestias explicabo.

Code

Markup

<div class="skip-link">
  <a href="#content">Skip to content (Press enter)</a>
</div>

SCSS

.skip-link a {
  position: absolute;
  z-index: 2;
  left: -1000px;
  padding: .5em;
  color: white;
  background: black;
  font-weight: bold;
  text-decoration: none;
}

.skip-link a:active,
.skip-link a:focus,
.skip-link a:hover {
  top: 0;
  left: 0;
  display: inline;
}

:target {
  background: yellow;
}