Как создать CSS Бейдж (Notification Badge)

Что такое бейдж?
Наглядный пример как это будет выглядеть:


Добавляем HTML код

Код HTML:

<button class="badge1" data-badge="6">Badge Notification Example</button> <br> <a href="" class="badge1" data-badge="27">Badge Notification Example</a>

Теперь стили CSS

Код:

.badge1 {
   position:relative;
}
.badge1[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-10px;
   right:-10px;
   font-size:.7em;
   background:green;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}