web-dev-qa-db-fra.com

Comment puis-je utiliser: avant la propriété pour créer un carré avant une étendue

Je veux créer un carré devant une travée. Quelque chose comme ça image .

enter image description here

Mais je n'arrive pas à créer cela avec span:before propriété. Est-il possible de créer avec ça? Si oui, quelqu'un peut-il me dire comment procéder?

J'ai créé cela avec du CSS simple. Voici mon code

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>

et [~ # ~] 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; 
}

Voici le lien de travail. Mais je veux utiliser ce HTML uniquement.

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

Comment est-ce possible?

htmlcsscss-shapes
12
Manoj Kumar

Vous devez ajouter content: "" pour span:before travailler

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

Vous pouvez le faire en ajoutant "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>
7
Robin Carlo Catacutan
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>

Il suffit d'ajouter :before dans votre ancien CSS et changez le block en inline-block pour qu'il tienne dans une ligne et ait un block pour l'ensemble span et reste changez les sélecteurs css en :before pour qu'il prenne sa couleur respective.

2
Kawinesh SK

http://jsfiddle.net/4p3632pg/

Cela devrait être ce que vous cherchez

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

Essaye ça.

Exemple CodePen

Ce que vous devez faire, c'est supprimer la largeur de la travée et changer de classe. Notez que :before besoin d'avoir content: '' propriété à afficher.

Voici le 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>

Et 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; 
}
1
Zlatko Vujicic