user274065 user274065 - 2 months ago 5
CSS Question

Having issues using span and colors in HTML, CSS

I am trying to create a green dot on a chat window, just like facebook does.
enter image description here

My section of the html that refers to my problem looks like this:

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


My CSS code looks like this:

.green {
color: green;
}


Every other element in my CSS works fine, so it's not a reference issue. Only this one. the green dot is not being generated.

Any ideas on what the issue might be?

Answer

Setting the color to green implies that there is some text/character in that span to be colored (unicode character • should do).

.green {
  color: green;
}
<div class="col-md-8">
<span class="green">•</span> Chat (32)
</div>


Alternatively (if cannot change the html) you might want to use background-color and make the element round

.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>