html - 将圆圈移至 font Awesome Bell 的右上角

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> -tag，然后在 CSS 中添加:

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