title: How can I use :before property to create a square before a span
body: <p>I want to create a square in front of a span. Something like this <a href="http://www.awesomescreenshot.com/image/174650/ee51cf32147fa63cc5eb177c08cf6038" rel="noreferrer">image</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/Bmm1T.png" alt="enter image description here"></p>
  
  <p>But I am not successful in creating this with <code>span:before</code> property. Is it possible to create with this? If yes then can someone please tell me how can I do this? </p>
  
  <p>I have created this with simple CSS . Here is my code </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="five_day_table"&gt;
      &lt;h3&gt;Annual Cleaning Schedule&lt;/h3&gt;
      &lt;div class="r-cl"&gt;&lt;span&gt;&lt;/span&gt;Forecasted Rain Clean&lt;/div&gt;
      &lt;div class="m-cl"&gt;&lt;span&gt;&lt;/span&gt;Forecasted Manual Clean&lt;/div&gt;
      &lt;div class="cm-cl"&gt;&lt;span&gt;&lt;/span&gt;Completed Manual Clean&lt;/div&gt;
      &lt;div class="d-cl"&gt;&lt;span&gt;&lt;/span&gt;Forecasted Dirty Rain&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <strong>CSS</strong></p>
  
  <pre><code>#five_day_table span {
    width: 14px;
    height: 14px;
    display: block;
    float: left;
    margin: 1px 3px 0px 0px;
  }
  .r-cl span
  {
   background:  Blue; 
  }
  .m-cl span
  {
   background:  red; 
  }
  .cm-cl span
  {
   background:  green; 
  }
  .d-cl span
  {
   background:  brown; 
  }
  </code></pre>
  
  <p>Here is the working link. But I want to use this HTML only.</p>
  
  <pre><code>&lt;div id="five_day_table"&gt;
      &lt;h3&gt;Annual Cleaning Schedule&lt;/h3&gt;
      &lt;span class='one'&gt;Forecasted Rain Clean&lt;/span&gt;
      &lt;span class='two'&gt;Forecasted Manual Clean&lt;/span&gt;
      &lt;span class='three'&gt;Completed Manual Clean&lt;/span&gt;
      &lt;span class='four'&gt;Forecasted Dirty Rain&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How is it possible?</p>