如何修改我的CSS以便我可以在DOM中显示具有特定颜色的元素？

Question

我正在尝试使用Bootstrap和JavaScript构建一个网站。我正在尝试通过在登录我的Web应用程序时在其配置文件名称旁边显示绿色气泡来了解如何实现一项功能，该功能将显示用户正在积极参与该网站。我创建了该项目并包含了一些代码，试图以绿色显示活动用户气泡，而不是显示用户离线的红色气泡。

请参阅下面的图片，其中显示了我要完成的工作。

为清晰起见，我还提供了一个代码段。

任何指导都将不胜感激。

HTML

 <div id="user-avtive"><span><img  src="/assets/images/signin/User-online.png"></span></div>

Answer 1

使用伪元素 ::after,::before代替图片。 你可以尝试这样的事情。

.user{
font-size:15px;
font-weight:bold;
text-transform:uppercase;
position:relative;
display:inline-block;
}

.user::after{
content:"";
height:8px;
width:8px;
border-radius:50px;
background-color:#000000;
top:0;
right:-10px;
margin:auto;
display:inline-block;
position:absolute;
}

.user.active::after{
background-color:#00ff00;
}

.user .username{
color:#0000ff;
}

<div class="user active">
hi <span class="username">User</span>
</div>