html - facebook style notification in html button using only hml and css

Question

I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.

I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.

my button looks like this

<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>

and I've tred to do this with my css

.notification:before {
  content: ' \25CF';
  font-size: 5em;
  color:red;
}

here is a js fiddle I was working with

http://jsfiddle.net/N8cjB/5/

Answer 1

<span>而且我不相处，所以我把它改成了<div>

给你：http: //jsfiddle.net/aXvqW/3/

编辑按要求将其移出按钮一点点。

Answer 2

为了简单起见，您不需要:before.

添加border-radius到跨度，并使数字居中使用text-align: center

.notification {
      border-radius: 30px;
    text-align: center;
    border: red;
    width:20px;
    height:10px;
    background: red;
    padding: 2px;

} 

在小提琴中检查这个

Answer 3