移动一个圆圈到一个字体的右上角

Question

我有一个font-awesome钟，我正试图使一个钟出现在钟的右上角。这是一个我想用颜料制作的例子。网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

尝试:after而不是:before，因为font-awesome使用:before来显示实际的字体图标