How can I use: before the property, create a square before the span

Question

I want to create a square before the span. Something like this image .

But I was not able to create this using the span:before property. Is it possible to create with this? If so, can someone tell me how can I do this?

I created this with simple CSS. Here is my code

HTML:

 <div id="five_day_table"> <h3>Annual Cleaning Schedule</h3> <div class="r-cl"><span></span>Forecasted Rain Clean</div> <div class="m-cl"><span></span>Forecasted Manual Clean</div> <div class="cm-cl"><span></span>Completed Manual Clean</div> <div class="d-cl"><span></span>Forecasted Dirty Rain</div> </div> 

and CSS

 #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; } 

Here is a working link. But I want to use only this HTML code.

 <div id="five_day_table"> <h3>Annual Cleaning Schedule</h3> <span class='one'>Forecasted Rain Clean</span> <span class='two'>Forecasted Manual Clean</span> <span class='three'>Completed Manual Clean</span> <span class='four'>Forecasted Dirty Rain</span> </div> 

How is this possible?

Answer 1

You need to add content: "" for span:before to work

 #five_day_table span { display: block; margin: 1px 3px 0px 0px; } span:before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 5px; } .one:before { background: Blue; } .two:before { background: red; } .three:before { background: green; } .four:before { background: brown; } 

 <div id="five_day_table"> <h3>Annual Cleaning Schedule</h3> <span class='one'>Forecasted Rain Clean</span> <span class='two'>Forecasted Manual Clean</span> <span class='three'>Completed Manual Clean</span> <span class='four'>Forecasted Dirty Rain</span> </div> 

Answer 2

You can do this by adding "content: '■';"

 #five_day_table span { width: 14px; height: 14px; margin: 1px 0 0px 0px; } #five_day_table span:before { content: '■'; margin-right: 2px; font-size: 25px; vertical-align: middle; display: inline-block; margin-top: -5px; } #five_day_table span:after { content: ''; display: block; clear:both; } span.one:before { color: Blue; } span.two:before { color: red; } span.three:before { color: green; } span.four:before { color: brown; } 

 <div id="five_day_table"> <h3>Annual Cleaning Schedule</h3> <span class='one'>Forecasted Rain Clean</span> <span class='two'>Forecasted Manual Clean</span> <span class='three'>Completed Manual Clean</span> <span class='four'>Forecasted Dirty Rain</span> </div> 

Answer 3

 span{ display:block; } #five_day_table span:before { width: 14px; height: 14px; display: inline-block; margin: 1px 3px 0px 0px; content:""; } .one:before { background: Blue; } .two:before { background: red; } .three:before { background: green; } .four:before { background: brown; } 

 <div id="five_day_table"> <h3>Annual Cleaning Schedule</h3> <span class='one'>Forecasted Rain Clean</span> <span class='two'>Forecasted Manual Clean</span> <span class='three'>Completed Manual Clean</span> <span class='four'>Forecasted Dirty Rain</span> </div> 

Just add :before to your old CSS and change the block to inline-block so that it fits in the line and has block for the whole span and the rest change the css selector to :before to take the appropriate color.

Answer 4

Try it.

CodePen Example

What you need to do is remove the width from the range and change the class. Please note: to display :before must be a property content: '' .

Here is the HTML code:

 <div id="five_day_table"> <h3>Annual Cleaning Schedule</h3> <span class='one'>Forecasted Rain Clean</span> <span class='two'>Forecasted Manual Clean</span> <span class='three'>Completed Manual Clean</span> <span class='four'>Forecasted Dirty Rain</span> </div> 

And css:

 #five_day_table span { height: 14px; display: block; margin: 1px 3px 3px 0px; } #five_day_table span:before{ content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 5px; } .one:before{ background: Blue; } .two:before{ background: red; } .three:before{ background: green; } .four:before{ background: brown; } 

Answer 5

http://jsfiddle.net/4p3632pg/

It should be what you are looking for

 #five_day_table > span { display:block; } #five_day_table > span::before { content:''; width: 14px; height: 14px; display: block; float: left; margin: 1px 3px 0px 0px; } .one::before { background: Blue; } .two::before { background: red; } .three::before { background: green; } .four::before { background: brown; }