Hi, I am having some issues regarding sidenotes and automatic index

This is my css

body{
  counter-reset: sidenote-figure 1;
}
.sidenote-lua-index{
  &::after{
    counter-increment: sidenote-figure;
    content: counter(sidenote-figure) " ";
    font-size: 0.8em;
    line-height: 0;
    vertical-align: super;
  }


}
.sidenote-lua {
  &::before {
    content: counter(sidenote-figure) " ";
    font-size: 0.8em;
    line-height: 0;
    vertical-align: super;
  }
  font: 9.5pt/4mm var(--serif);  
  -prince-float: rightnote;
  footnote-style-position: inside;
  text-align: left;
  text-indent: 0;
}

.sidenote-lua-index is being created with javascript onload as suggested in the tutorials
addSidenoteMarks('.sidenote-lua', 'sidenote-lua-index')

Funny enough the index is displayed correctly in the HTML version but it doesn't show up in the PDF, find attached

Any ideas on why this could happen? Many thanks!!

also, in the examples the content: counter(sidenote-figure) " "; is applied directly on the span but I read on the css documentation that content only can be applied to ::before or ::after selectors is that correct?

1. Screenshot 2024-12-04 at 11.33.18.png‎ 160.7 kB
2. Screenshot 2024-12-04 at 11.34.05.png‎ 97.7 kB

Hi, finally figured it out so I am adding this in case someone needs it:

- It did not worked because prince was not using the javascript, so I was loading the javascript file charms.js --used in the css4.pub page- in the HTML but you actually need to enable in prince by using --javascript when launching prince