Letters are not properly underlined

Question

I want to implement a text-resizer functionality. The text should resize depending the letter clicked. There is a small, medium and large letter, and if one clicked should be underlined, in order to inform the user the text size has chosen.

#smalltext {
  font-size: 1em;
}

#mediumtext {
  font-size: 1.25em;
}

#largetext {
  font-size: 1.5em;
}

.resizer {
  margin: 15px;
}

a.resizer:hover {
  cursor: pointer;
}

.resizer-selected {
  text-decoration: underline;
  /*border-bottom: 2px solid black; */
}

<div>
  <a class="resizer resizer-selected" id="smalltext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="mediumtext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="largetext">
    <span>A</span>
  </a>
</div>

The problem is with css. As you can see in the snippet, only the third letter is properly underlined.
The line in first and second letter exceeds to the right. I tried text-decoration: underline; and border-bottom and is the same problem.
The size seems not to be a problem, as i tried the same size for all three, but the problem remained

Answer 1

Use display: inline-block; on .resizer to bind the letter spacing to the font-size:

#smalltext {
	font-size: 1em;
}
#mediumtext {
	font-size: 1.25em;
}
#largetext {
	font-size: 1.5em;
}

.resizer {
	margin: 15px;
  display: inline-block;
}

a.resizer:hover {
	cursor: pointer;
}

.resizer-selected {
 	text-decoration: underline;
	/*border-bottom: 2px solid black; */
}

<div>
  <a class="resizer resizer-selected" id="smalltext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="mediumtext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="largetext">
    <span>A</span>
  </a>
</div>

Answer 2

.resizer-selected > span {
    text-decoration: underline;
}