<nav>
  <a>Home</a>
  <a>Write</a>
  <a id="new-notif" class="notif">Notifications <span id="notif_count" class="notif-count">2</span></a>
  <a>Profile</a>
  <a>Settings</a>
</nav>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600);


body, nav { display:flex; }

body {
  background:gainsboro;
  justify-content:center;
  margin:2rem;
}

nav {
  display:flex;
  width:50rem;
  background:#f4f4f4;
  border-radius:1rem;
  border:2px solid #bbb;
  border-bottom-color:#aaa;
}

nav a {
  display:inline-block;
  flex:1 auto;
  text-align:center;
  font:1.3rem/5rem "Source Sans Pro";
  cursor:pointer;
  border:solid #bbb;
  border-width:0 1px;
}
nav a:first-child { border-left:0; }
nav a:last-child { border-right:0; }

.notif-count {
  display:inline-block;
  font-size:1.1rem;
  line-height:2rem;
  width:2rem;
  background:limegreen;
  border-radius:50%;
  margin-left:.2rem;
  font-weight:bold;
  animation:earthquake 130ms 20;
  vertical-align:5%;
}

.notif:hover .notif-count { animation-delay:-130ms; }

@keyframes earthquake {
  25%{ transform:rotate(-5deg) translateX(-1px); }
  50%{ transform:translateY(-1px); }
  75%{ transform:rotate(7deg) translateY(1px); }
}


a:not(.notif){ opacity:.5; color:transparent; text-shadow:0 0 .25rem #000; }
.notif { background:white; }

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js