html - 仅使用 html 和 css 的 html 按钮中的 facebook 样式通知

Question

我正在尝试构建一个附加了一些通知的按钮，并且正在尝试模拟 facebook 通知样式。右上角有一个红色的小圆圈，里面有一个数字。

不过我遇到了一些问题。我似乎无法将圆圈放在正确的位置或让数字真正位于其中。

我的按钮是这样的

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

我已经尝试用我的 CSS 来做到这一点

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

这是我正在使用的 js fiddle

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

Answer 1

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

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

edit 根据要求将其从按钮中移出一点。