我想在跨度前面创建一个正方形。像这样的 image .
但是我没有成功地使用 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>
这怎么可能?
最佳答案
您需要添加 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>
关于html - 我如何使用 :before property to create a square before a span,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30023288/