CSS Underline using pseudo styles - thickness changes on position change issue

Question

I am using CSS Underline using pseudo styles to create underline for text. And facing an issue of underline thickness is changed on changing the position of the CSS property bottom on my website.

.underline {
  text-decoration: none;
  position: relative;
}

.underline:after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -4px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  background: green;
}

.underline2 {
  text-decoration: none;
  position: relative;
}

.underline2:after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -6px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  background: green;
}

<p>This is some example text and this is a <a href="#" class="underline">flashy link</a> using pseudo styles.</p>
<p>This is some example text and this is a <a href="#" class="underline2">flashy link</a> using pseudo styles.</p>

If I change value from bottom: -4px; to bottom: -6px; issue start appearing

Link for the same issue https://codepen.io/Tushar-Jain-the-animator/pen/qBLbyxW