How can I use :before property to create a square before a span


Tags: html,css,css-shapes

Problem :

I want to create a square in front of a span. Something like this image.

enter image description here

But I am not successful in creating this with span:before property. Is it possible to create with this? If yes then can someone please tell me how can I do this?

I have 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 the working link. But I want to use this HTML only.

<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 it possible?



Solution :

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>


    CSS Howto..

    How to php echo content into
    classes dynamicaly [closed]

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    How to make custom css fonts render exactly like designs

    How to fix this common problem of position:fixed elements not expanding to its parent width?

    How to reference / link to a Css-File styling elements in a webview for Android

    How to remove or reset CSS style using JS?

    How to do this with vertically stacked tabs, instead of horizontal?

    With twitter bootstrap, how can I make it so that there's no word wrap in tables without breaking columns?

    How to scroll left column when cursor is above right column?

    how to apply multiple css image filters using jquery

    How to make heading appear in different colors

    How to make two divs side by side using inline-block?

    How to keep text in the middle of the screen even when re-sizing page in html/css

    How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

    How To Set Height of Child Div According To Parent Div

    How to make footer elements (image and label) centered?

    How to put textarea in div with CSS

    CSS how to hide resize divs while keeping it centerd

    How to change font-awesome icon color when it is active

    How to transform Menu icon to Arrow icon? [closed]

    How to center text vertically in a flex box?

    How do I make an element scale down to nothing using a CSS transition on the iPhone?

    css - how to hide href link nested inside a div?

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How to program a CSS3/JQuery/Flexslider carousel with visible sides

    How to rotate an object 120deg on every click with CSS-transition/transform throu JS

    How to add padding to the cells of a table with CSS [closed]

    How to combine jQuery animate with css3 properties without using css transitions?

    How to keep curved borders using css 3

    How can I target a element inside h2