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..

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to make these scale right in CSS (block with horizontal and vertical attachés)

    How to access regular CSS from GWT widget?

    How to squircle an app icon image with just CSS

    How can I easily copy the whole CSS file from a website?

    How to select a .list-cell, in javaFX CSS

    How to have jquery add a panel inside a panel in Bootstrap v3

    How an mobile compatible website handles the performance?

    How to add part of css property value through scope in ng-style in angular

    How to select a td by position of its relative th?

    How does Media Queries Reacts

    CSS how to fill height of container?

    How to write this css in shorter way? see example

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    How to make this CSS compatible with IE browsers? [closed]

    How do I simulate a hover with a touch in touch enabled browsers?

    How to extend a wrapped element background both left and right with different color?

    How can one create horizontal tree view using CSS and HTML?

    How to use knockout and i18next for a specfic screen size?

    How to control the expandability of textarea from width perspective

    How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?

    Showcase the first n-items in a bootstrap grid

    How to use CSS to place text on different sizes of images?

    Make image show when screen reaches a certain width (pixels)

    How to set background color of td in CSS

    How to disable
    tags inside
    by css?

    How do I set a custom style to a BorderConatiner in Dojo using CSS

    How to add background-size in css based on image size?

    how to set overflow: hidden; to one element

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?