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

How can I use :before property to create a square before a span

提问by Manoj Kumar

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:beforeproperty. Is it possible to create with this? If yes then can someone please tell me how can I do this?

但是我没有成功地用span:before财产创造这个。可以用这个创建吗？如果是，那么有人可以告诉我我该怎么做？

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

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

HTML:

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

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

这怎么可能？

回答by anpsmn

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

您需要添加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>

回答by Robin Carlo Catacutan

You can do that by adding "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>

回答by Kawinesh SK

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 :beforein your old CSS and change the blockto inline-blockso that it fits in a line and have a blockfor the whole spanand rest change the css selectors to :beforeso that is takes its respective color.

只需添加:before您的旧 CSS 并更改blockto inline-block以使其适合一行，并block为整个span和其余更改 css 选择器以:before使其采用其各自的颜色。

回答by Zlatko Vujicic

Try this.

尝试这个。

CodePen Sample

代码笔示例

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

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

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:

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

回答by CoBolt

http://jsfiddle.net/4p3632pg/

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