How to remove whitespace between ::before and actual content-CodePudding

I want to create a custom numbering style for an ordered list that immitates footnotes. However, when I do this, via an li::before pseudoelement (see snippet below), if there is a whitespace between the <li> tag and its actual content in the HTML code, there is a space rendered between the custom number and the item content.

What do I have to do to get rid of the whitespace, or at least make it behave consistently (i.e. it always is or is not there), regardless of whether there is one in the HTML code?

ol {
  list-style: none;
  counter-reset: x;
}

ol li {
  counter-increment: x;
}

ol li::before {
  content: counter(x);
  vertical-align: super;
  font-size: smaller;
}

<ol>
  <li>no leading space</li>
  <li>
    leading space
  </li>
<ol>

CodePudding user response：

Let's normalize it to be with white space. For all the good reasons. This is done by adding " " to the counter(x) content.

ol {
  list-style: none;
  counter-reset: x;
}

ol li {
  counter-increment: x;
}

ol li::before {
  content: " " counter(x) " ";
  vertical-align: super;
  font-size: smaller;
}

<ol>
  <li>no leading space</li>
  <li>
    leading space
  </li>
</ol>

CodePudding user response：

Picking up on @IT goldman's answer: If you don't want that "normalized" space, you could still do it that way, but add position: relative; and a negative rightsetting to the ol li::before rule to move the number towards the beginning of the li contents:

ol {
  list-style: none;
  counter-reset: x;
}

ol li {
  counter-increment: x;
}

ol li::before {
  content: " " counter(x) " ";
  vertical-align: super;
  font-size: smaller;
  position: relative;
  right: -0.2em;
}

<ol>
  <li>no leading space</li>
  <li>
    leading space
  </li>
</ol>