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

Question

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

但是我没有成功地用span:before创建它span:before属性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工作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> 

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> 

只需添加:before在您的旧CSS :before ，将block更改为inline-block ，使其适合一行，并为整个span设置一个block ，然后将css选择器更改为:before采用其各自的颜色。

Answer 4

试试这个。

CodePen示例

您需要做的是从span中删除宽度，并更改类。 注意:before需要有content: ''属性才能显示。

这是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>

和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/

这应该是你正在寻找的

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