Письма не подчеркнуты должным образом

Question

Я хочу реализовать функцию изменения размера текста. Размер текста должен изменяться в зависимости от того, по какой букве щелкнули Это маленькая, средняя и большая буква, и если щелкнуть один раз, следует подчеркнуть, что размер текста выбран пользователем.

#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>

Проблема с css. Как видно из фрагмента, только третья буква подчеркнута правильно.
Строка в первой и второй букве превышает правую. Я пробовал text-decoration: underline; и border-bottom и это та же проблема.
Размер, похоже, не проблема, так как я пробовал одинаковый размер для всех трех, но проблема осталась

Answer 1

Используйте display: inline-block; на .resizer, чтобы привязать расстояние между буквами к размеру шрифта:

#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;
}