CSS - iOS style notification badge

based on http://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol

by katalin_2003

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<button data-count="37" class="fa fa-envelope fa-5x fa-border icon-blue badge"></button>

CSS

*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
button {   
    width:150px;
    text-align:center;
    vertical-align:middle;
    position: relative;
    background-color: #FFFFFF;
}
.badge:after{
    font-family: Helvetica, sans-serif;
    content:attr(data-count);
    position: absolute;
    background: #F80000;
    height:2rem;
    top:1rem;
    right:0.7rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 9999px;
    color: #FFFFFF;
    border:1px solid #F80000;
}