Jak używać: przed właściwością utworzyć kwadrat przed rozpiętością

Question

Chcę utworzyć kwadrat przed przęsłem. Coś takiego jest image.

Ale nie jestem sukces w tworzeniu tego z span:before nieruchomości. Czy można to stworzyć? Jeśli tak, czy ktoś może mi powiedzieć, jak mogę to zrobić?

Utworzyłem to z prostym CSS. Oto mój kod

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> 

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

Oto link roboczego. Ale chcę używać tylko tego kodu 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> 

Jak to jest możliwe?

Answer 1

Trzeba dodać content: "" dla span:before pracować

#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

Spróbuj tego.

CodePen Sample

Co trzeba zrobić, to usunąć szerokość od rozpiętości i klasą zmian. Zauważ, że :before musi mieć właściwość content: '', aby mogła być wyświetlana.

Oto kod 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> 

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

ta powinna być co szukasz

#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 w starym CSS i zmienić block do inline-block tak, że wpisuje się w linię i mieć block dla całego span i odpocząć zmienić selektorów CSS :before tak czyli ma odpowiedni kolor.

Answer 5

Można to zrobić poprzez dodanie "treść: '■';"

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