Hand emoji 👉Here👈 has extra space, how can I solve this with CSS elegantly?

Question

p {
  font-size: 16px;
}

<p>
  <span>👉</span>
  <span>Here</span>
  <span>👈</span>
</p>

As you can see, the left emoji hand has extra empty space.

Currently, I add padding-left: 0; padding-right: 5px; to the center string.

But is there any other way or CSS property that can solve this?

My Browser is Chrome 80, there is actually a little extra space.

Although one line will remove space, but the problem still stands:

Using Pseudo class is not helping either, notice that there is still not line up

Answer 1

I did a lot of cheating but this seems to work

p {
  font-size: 16px;
  letter-spacing: -6px;
}
.letters{
  letter-spacing: 0.01em;
  padding-left: 0.35em;
}

<p>
  👉
  <span class="letters">Here</span>
  👈
</p>

Answer 2

The emojis are really just decoration, not content. Use psuedo elements and the problem is solved.

p {
  font-size: 16px;
}

p > span::before{
  content: '👉';
}

p > span::after{
  content: '👈';
}

<p>
  <span>Here</span>
</p>