html - 在 HTML、CSS 中使用跨度和颜色时遇到问题

Question

我正在尝试在聊天窗口上创建一个绿点，就像 facebook 所做的那样。

涉及我的问题的 html 部分如下所示:

<div class="col-md-8">
<span class="green"> </span> Chat (32)
</div>

我的 CSS 代码如下所示:

 .green {
  color: green;
}

我的 CSS 中的所有其他元素都工作正常，因此这不是引用问题。只有这一个。未生成绿点。

关于问题可能是什么的任何想法？

Answer 1

将颜色设置为绿色意味着该范围内有一些文本/字符需要着色( unicode character • 应该)。

.green {
  color: green;
}

<div class="col-md-8">
<span class="green">•</span> Chat (32)
</div>

---

或者(如果不能更改 html)您可能想使用 background-color 并使元素变圆

.green {
  display:inline-block;
  width:0.5em;
  height:0.5em;
  border-radius:50%;
  background-color: green;
}

<div class="col-md-8">
<span class="green"> </span> Chat (32)
</div>