CSS to show link URLs in the window corner immediately on hover

show href on hover.css

/* This shows URLs in the bottom left corner of the window immediately on hover, similar to
   how most web browsers do it, but faster.

   In Google Chrome, hovering over a link will show the target URL at the bottom of the window.
   But Chrome takes its sweet time with this, especially if the URL is long, where it starts by
   showing a subset of the URL, with a '...' replacing the part of the URL that was hidden.
   
   Some people (myself included) would much prefer if Chrome showed the complete URL immediately:
   https://superuser.com/questions/778533/getting-url-in-status-bar-immediately-on-hovering-over-a-link
   
   This CSS is a demo of how that might look. This will work if dropped in to most websites,
   but it should not be used for anything serious, because:
   - It will conflict with any other use of the a::after pseudo-element on pages.
   - It creates a pseudo-element for every link on the page (bad for large pages).
   - It will not show the full URL if the link URL is relative.
*/

a::after {
    content: attr(href);
    transition: opacity .2s;
    position: fixed;
    left: 0;
    bottom: 22px; /* Raise it up above the browser's link target display area */
    background-color: cornflowerblue;
    font: 14px Consolas, monospace;
    color: black;
    border-radius: 3px;
    padding: 0px 2px;
    opacity: 0;
}
a:hover::after {
    opacity: 1;
}