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

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

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

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?

但是我没有成功地用span创建它:在属性之前。有可能用这个创建吗?如果是,那么有人可以告诉我该怎么做?

I have created this with simple CSS . Here is my code

我用简单的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>

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.

这是工作链接。但我只想使用这个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>

How is it possible?

这怎么可能?

5 个解决方案

#1

You need to add content: "" for span:before to work

您需要添加内容:“”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>

#2

You can do that by adding "content: '■'; "

您可以通过添加“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>

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

Just Add :before in your old CSS and change the block to inline-block so that it fits in a line and have a block for the whole span and rest change the css selectors to :before so that is takes its respective color.

只需添加:在您的旧CSS之前,将块更改为内联块,使其适合一行,并为整个范围设置一个块,然后将css选择器更改为:before之前采用其各自的颜色。

#4

Try this.

CodePen Sample

What you need to do, is to remove width from span, and change class. Note that :before need to have content: '' property in order to be shown.

您需要做的是从span中删除宽度,并更改类。注意:之前需要有内容:''属性才能显示。

Here's HTML code:

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

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

#5

http://jsfiddle.net/4p3632pg/

This should be what you're looking for

这应该是你正在寻找的

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