我如何使用:在属性之前在跨度之前创建一个正方形

Question

我想在跨度前面创建一个正方形.像这个图像的东西.

但我没有成功用span:before财产创造这个.有可能用这个来创造吗？如果是,那么有人可以告诉我我该怎么做？

我用简单的CSS创建了这个.这是我的代码

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>

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

这是工作链接.但我只想使用这个HTML.

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

您需要添加content: ""为span:before工作

#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

你可以通过添加"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>