26787 sujets

CSS et mise en forme, CSS3

Hello

Contexte : J'utilise SASS via symfony 3x et le webpack ENCORE. J'ai 10 inputs radio et je souhaite ajouter des :before afin d'afficher les chiffres 1, 2, 3 jusqu’à 10 (d'où la boucle).

@for $i from 0 through 10 {
  .content-0t10:nth-child(#{$i}){
    &:before{
      content : $i;    
      position: absolute;
      margin-top: -23px;
    }
  }
}


Le scss est donc compilé comme tel :
.content-0t10:nth-child(0):before {
  content: 0;
  position: absolute;
  margin-top: -23px; }

.content-0t10:nth-child(1):before {
  content: 1;
  position: absolute;
  margin-top: -23px; }

.content-0t10:nth-child(2):before {
  content: 2;
  position: absolute;
  margin-top: -23px; }

et ce... jusqu'a 10 donc.

mais le visuel au dessus de mes input radio, je ne le vois pas.

à l'inverse, je vois le before quand je l'écris comme tel :

.content-0t10{
  &:before{
    content : "1";
  }
}

mais dans ce cas précis, je n'ai pas le coté incrémentiel donc ça ne m'intéresse pas
Qq1 à une piste de solution ?
Merci.

EDIT 1 : Je viens d'essayer de placer le :before avant le :nth child, mais c'est pareil, j'ai pas de résultat.
Modifié par JENCAL (25 Apr 2018 - 10:59)
Hi!

Je n'ai pas teste, mais n'est-ce pas simplement un probleme de quotes?
Tu peux peut-etre essayer ca :
content : "#{$i}";


PS : desole je suis sur un clavier sans accent
Je pense à la même chose que TryAndShare.
Aussi pourquoi ne pas utiliser Counter qui te permettra d'ajouter autant que tu veux sans te soucier de la boucle ?

Edit : Ou un simple <ol> si sémantiquement tu as une liste ordonnée, pourquoi ne pas l'exprimer clairement ?
Modifié par Yordi (25 Apr 2018 - 11:24)
bordel ! bien joué !
c'est bien un problème de quote....
je me concentré beaucoup trop sur la structure des selecteurs que j'ai délaissé l'essentiel...

Merci beaucoup en tout cas!
Yordi a écrit :

Aussi pourquoi ne pas Counter qui te permettra d'ajouter autant que tu veux sans te soucier de la boucle ?

Parce que je connaissais absolument pas counter Smiley smile
c'est une boucle for toutes pourrie c'est pas de la bouille ! Smiley bawling
Modifié par JENCAL (25 Apr 2018 - 12:34)