How can I create a list, where at the end of each item on the list, there is a colored square?

Question

Here is what I have, but the boxes are going before the text, need them after

.box {
  float: left;
  height: 20px;
  width: 20px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<ul>
  <li>Red<span class="box red"></span></li>
  <li>Green<span class="box green"></span></li>
  <li>Blue<span class="box blue"></span></li>
</ul>

Answer 1

Floats are troublesome and usually an outdated approach. Don't use them unless you know why. Here they were doing what a person would expect when set to left, which is to shift their elements to the left side of their containing element.

Also note that span elements are inline. This means they don't have size. Either use divs or set them to inline-block. The float effectively did that for you, but we need to do it ourselves now.

.box {
  display: inline-block;
  height: 20px;
  width: 20px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<ul>
  <li>Red<span class="box red"></span></li>
  <li>Green<span class="box green"></span></li>
  <li>Blue<span class="box blue"></span></li>
</ul>