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

Question

我想在跨度前面创建一个正方形。像这样 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; 
}

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

试试这个。

CodePen Sample

您需要做的是从 span 中删除宽度，然后更改 class。请注意 :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 3

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

Answer 4

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.

Answer 5

您可以添加 "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>

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

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

html

css

css-shapes

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

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

html

css

css-shapes

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