带有状态指示器的简单头像 - 仅 CSS - 分步教程

有关如何仅使用 CSS 创建带有状态指示器的简单头像的教程。

超文本标记语言

对于 HTML，我们只需要一个带有“avatar”类的 div 元素和一个带有“status”元素的 span 元素。该元素将指示状态。

默认值为离线，通过添加“active”类，状态指示器将变为绿色。

现在，我们将向其添加一个“活动”类。

<div class="avatar">
    <span class="status active"></span>
</div>