Not working stylus heading loop before content

Question

Working code:

Stylus

for num, $s in (1..6)
    h{$s+1}
        display inline-block

HTML

h1:before {
  position: relative;
}
h2:before {
  position: relative;
}
h3:before {
  position: relative;
}
h4:before {
  position: relative;
}
h5:before {
  position: relative;
}
h6:before {
  position: relative;
}

Not working code:

Stylus

for num, $s in (1..6)
    h{$s+1}
        &:before
            display inline-block
            content h{$s+1}

How would you do to make the resulting code the next and can be displayed in the before content of the css

HTML

h1:before {
  content: "h1";
}
h2:before {
  content: "h2";
}
h3:before {
  content: "h3";
}
h4:before {
  content: "h4";
}
h5:before {
  content: "h5";
}
h6:before {
  content: "h6";
}

Any possible solution?

Answer 1

Work code:

Stylus

for $i in (1..6)
    h{$i}
        &:before
            content "h" + $i

HTML

h1:before {
  content: 'h1';
}
h2:before {
  content: 'h2';
}
h3:before {
  content: 'h3';
}
h4:before {
  content: 'h4';
}
h5:before {
  content: 'h5';
}
h6:before {
  content: 'h6';
}