Skip to content

Instantly share code, notes, and snippets.

Last active April 24, 2024 08:33
Show Gist options
  • Save abernier/3070589 to your computer and use it in GitHub Desktop.
Save abernier/3070589 to your computer and use it in GitHub Desktop.
Link anatomy
html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
[title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;}
[title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;}
:target:before {background:black; color:yellow;}
[title] [title]:before {margin-top:1.5em;}
[title] [title] [title]:before {margin-top:3em;}
:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}
<!DOCTYPE html>
<meta charset=utf-8>
<title>Link anatomy</title>
<link rel="stylesheet" href="index.css">
<span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname"></span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
<script src=""></script>
<script src="index.js"></script>
$('[title][id]').click(function (e) {
window.location.hash = '#' + $(this).attr('id');
$(':not([title])').click(function (e) {
window.location.hash = '';
Copy link

Copy link

Also to consider: Username and password

Copy link

kaleb commented Mar 5, 2021

Also consider origin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment