I want to create a small square colour filled box in HTML CSS And most important - I want to write one line after the box

Question

I have created a colored square box using code

.box {
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class='box red'></div>= Super Fast Trains<br>
<div class='box green'></div>= Mail/Express Trains<br>
<div class='box blue'></div>= Local/ Passenger Trains

So, if you could perhaps assist me with the proper update of my code to receive text following boxes and in the same margin, that would be great.

Answer 1

Try using the square html entity:

<div style="color:blue">&#9632;</div>