[Résolu] Probleme SASS nth child & before

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)

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)

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

Mais counter est bien plus propre et léger que cette bouillie de code généré

J'vois pas comment faire encore pour remplacer mon for par counter.. je regardes un peu..

kustolovic a écrit :
https://codepen.io/anon/pen/ZoOKjP