Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
clip
to define that no part of the element is shown.height
and width
of the element 1px
and negate them using margin: -1px
.position: absolute
so that the element does not take up space in the DOM.display: none
(not readable by screen readers) and visibility: hidden
(takes up physical 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;
}
CSS, Layout
Ensures that an element self-clears its children.
CSS, Layout
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
CSS, Layout
Limit multiline text to a given number of lines.