CSS 3 · Positioning, effects and animation
Hide text visually but keep it for screen readers
Hide an element from view but keep it available to assistive technology.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
More positioning, effects and animation commands
- Stick an element while scrolling
- Cover the parent
- Crop an image to fit its box
- Truncate text with an ellipsis
- Limit text to a number of lines
- Animate a change smoothly
All positioning, effects and animation commands · CSS 3 cheatsheet