将圆圈移动到字体真棒铃声的右上角

Question

我有一个字体很棒的铃铛，我正试图在铃铛的右上方出现铃声。 这是我想在paint.NET中做的一个例子 https://gyazo.com/2d74f611e2df81362bc3f2e946f9d747

这是我到目前为止所尝试的内容：

.notification {
	background: red;
	border-radius: 50%;
	border: 1px solid red;
	height: 8px;
	width: 8px;
	position: relative;
}

<i class='fa fa-bell notification'></i>

但这会将铃声放在左侧。我试过：之前它只是让它消失了。

提前谢谢。

Answer 1

将position: relative;添加到<i> - 代码中，然后添加到CSS中：

.notification:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    top: 0;
    right: 0;
    border-radius: 50%;
}

Answer 2

尝试：之后代替：之前，因为font-awesome使用：之前显示实际的字体图标