On link :focus preview url (CSS only)

When using the Tab key on a page to cycle through links, show a preview of the url (href attributes). Works with some clever :focus and :not() selectors and pseudo elements. Good idea for accessibility (?). What is a on link :focus preview url (css only) How do you make a on link :focus preview url (css only)? This script and codes were developed by Jelmer on 05 February 2022, Saturday.

How do I make an on link :focus preview url (css only)?
  1. On link :focus preview url (CSS only) Previews
  2. On link :focus preview url (CSS only) HTML Codes
  3. On link :focus preview url (CSS only) CSS Codes
  4. On link :focus preview url (CSS only) JS Codes
On link :focus preview url (CSS only) Previews

On link :focus preview url (CSS only) HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>On link :focus preview url (CSS only)</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>Press tab to cycle through links</h1>

<p><em>Focus on this view first. Notice that the effect shouldn&#39;t work on clicks.</em></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat nihil, autem obcaecati accusamus officiis amet beatae possimus quam maiores laboriosam ipsa corporis repudiandae velit iure. In <a href="//google.com">velit</a> nostrum dolorem cupiditate repellendus, praesentium nam consequuntur odio <a href="//codepen.io/jelmerdemaat">voluptatem</a> voluptate! Magni, officia, hic.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis sequi dolorem voluptate neque deserunt tempore adipisci aliquam <a href="//twitter.com/jelmerdemaat">libero</a> est laborum fugiat illum perferendis accusamus maiores provident mollitia quidem aspernatur culpa, vel quis cum eaque delectus ipsa facilis eius. Facere odit quasi, aut quisquam! Id a doloremque laborum vitae, officia saepe quae, aut modi omnis, non <a href="//github.com/jelmerdemaat">sunt</a> quod accusantium sed natus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis autem earum perferendis culpa quas dolorem quo veniam quia exercitationem, odio, adipisci incidunt pariatur, quam illum, provident cumque consequuntur fugiat praesentium <a href="//css-tricks.com">cupiditate</a> aliquam? Facere voluptates eligendi, vero expedita ullam dolor fugiat nobis impedit, qui, dignissimos odit quasi cum rerum adipisci quisquam.</p>
  
    <script src="js/index.js"></script>

</body>
</html>

On link :focus preview url (CSS only) CSS Codes

a {
  position: relative;
}

a:focus:not(:hover):not(:active) {
  outline: none;
  color: red;
}
a:focus:not(:hover):not(:active):after {
  display: block;
}

a:after {
  content: "Go to " attr(href);
  display: none;
  min-width: 100px;
  padding: 5px 10px;
  position: absolute;
  left: 0;
  top: 110%;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  white-space: nowrap;
}

body {
  max-width: 700px;
  margin: 60px auto;
  line-height: 1.5;
}

On link :focus preview url (CSS only) JS Codes

/*
When using the Tab key on a page to cycle through links, show a preview of the url (href attributes). Works with some clever :focus and :not() selectors and pseudo elements. Good idea for accessibility (?).

Selector idea from http://www.sitepoint.com/when-do-elements-take-the-focus/
*/
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.