使用Bootstrap对图像进行CSS徽章

我试图在图像上放置"通知"样式徽章.我使用Twitters Bootstrap作为基础框架并创建一个名为的自定义CSS类notify-badge.但我无法正常排队.

通过Photoshop的魔力,这就是我想要实现的目标.

这是我的CSS代码.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

我希望能够在徽章中放置任何小的文字,并展开红色圆圈以适应.

这是我的HTML代码.

 
     NEW
     
  
    
Some text

编辑:

这是APAD1答案的图像.

添加margin-top:-20px;以.item修复对齐问题.

一堆不同的方法,你可以做到这一点.这应该让你开始:

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}

  	

  		
			NEW