Alternative CSS to display: none; and visibility: hidden; using .offscreen css class . Sourced under a permissive license.

Alternative CSS to display: none; and visibility: hidden; using .offscreen css class

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<a class="button" href="https://google.com">
Learn More <span class="offscreen"> about pants</span>
</a>
<style>
.offscreen {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
<a class="button" href="https://google.com"> Learn More <span class="offscreen"> about pants</span> </a> <style> .offscreen { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } </style>
<a class="button" href="https://google.com">
  Learn More <span class="offscreen"> about pants</span>
</a>

<style>
.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
</style>

Tags: CSS, HTML, CSS, CSS code snippet, html code snippet, display: none, visibility: hidden, .offscreen, css class

Image: Unsplash license

CC BY 4.0 added intro and tags – 30 Seconds of Code