Microinteractions

link.css

a {
  color: #000;
  display:inline-block;
  text-decoration: none;
  position: relative;
}

a::after {
  height:2px;
  position:absolute;
  width:calc(100% - 11px);
  content: attr(data-target);
  text-indent: -9999px;
  padding-left:11px;
  line-height: 20px;
  font-size:11px;
  color: #fff;
  background:#000;
  left:0px;
  top:100%;
  transition: height 100ms linear
}

a:hover::after {
  height:20px;
  bottom:-20px;
  text-indent: 0px;
}

link.html

This contains a <a class="flaglink" href='http://wikipedia.com'>link to an article</a>, isn't that great?!

link.js

var links = document.getElementsByClassName('flaglink')
for (i = 0; i < links.length; ++i) {
  var url = links[i].getAttribute('href')

  if (url.indexOf("://") > -1) {
      hostname = url.split('/')[2];
  }
  else {
      hostname = url.split('/')[0];
  }
  hostname = hostname.split(':')[0];


  links[i].setAttribute('data-target', hostname)
}

menu.css

nav {
	margin:100px 0 0 100px
}

nav a {
	text-decoration: none;
	color: #fff;
	display:inline-block;
	position: relative;
	margin-right: 22px
}

nav a::before {
		background:#fff;
		height:1px;
		opacity:0.4;
		content:' ';
		width:100%;
		display:block;
		position: absolute;
		transition: all 100ms linear
}

.title {
	padding-top:15px;
	font-size:22px;
	text-transform: uppercase;
	font-weight: 100;
	display:block
}

.subtitle {
	font-size:11px;
	display:block;
	margin-top:6px;
	text-align: center;
	opacity:0;
	bottom:-11px;
	position: relative;
	transition: all 100ms linear;
	font-style: italic;
}

nav a:hover::before {
	height:4px;
	opacity:1;
}


nav a:hover .subtitle {
	opacity:0.6;
	bottom:0px
}

menu.html

<nav>
  <a href="#">
    <span class="title">Our Menu</span>
    <span class="subtitle">food for the soul</span>
  </a>

  <a href="#">
    <span class="title">Locations</span>
    <span class="subtitle">just around the bend<span>
  </a>

  <a href="#">
    <span class="title">Contact Us</span>
    <span class="subtitle">how can we help?</span>
  </a>

  <a href="#">
    <span class="title">About Us</span>
    <span class="subtitle">our little family</span>
  </a>

</nav>