Show Notification Counter With Bootstrap

I want to implement a notification counter which rolls up to show incremented number.(Like the one google shows with google+ notifications) I can't get overflow:hidden to work for

Solution 1:

Set display: inline-block on the .notif-surround span.

.notif-surround{
  overflow:hidden;
  display: inline-block;
}

The problem is that you can't set overflow hidden on an element which is set as display: inline, which is the default for a span, as you can't set its width and its height. Setting display: block or display: inline-block fixes this, with the first forcing a line break after itself, and the latter leaving the original flow of elements intact.