Offscreen
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
- Remove all borders and padding and hide the element's overflow.
- Use
clip
to define that no part of the element is shown. - Make the
height
andwidth
of the element1px
and negate them usingmargin: -1px
. - Use
position: absolute
so that the element does not take up space in the DOM.
<a class="button" href="https://google.com"> Learn More <span class="offscreen"> about pants</span> </a>
.offscreen { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }