Reduce white space between two consecutive <sup> elements

Issue

I have the following code

<p>Test
  <sup>1</sup>
  <sup>, 2</sup>
</p>

Which are displayed like 1 , 2. When I try apply some style I don't know where, since no margins or paddings are set. So, which style should I apply for all but the first sup?

Solution

You can try just using one sup. If you need two, you can also try applying a negative margin on sup. Since you don't need it on the first-child but need it on all other children, use this:

p > sup:not(:first-child) {}

See it working here:

p>sup:not(:first-child) {
  margin-left: -4px;
}

<p>Test
  <sup>1,2,</sup>
  <sup>3</sup>
</p>

<p>Test
  <sup>1,</sup>
  <sup>2,</sup>
  <sup>3,</sup>
  <sup>4</sup>
</p>

<p>Test
  <sup>1,</sup>
  <sup>2,</sup>
  <sup>3,</sup>
  <sup>4,</sup>
  <sup>5,</sup>
  <sup>6,</sup>
  <sup>7,</sup>
  <sup>8</sup>
</p>

Answered By - Kameron