html - 字母没有正确下划线

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是同样的问题。
尺寸似乎不是问题，因为我尝试了所有三个相同的尺寸，但问题仍然存在

标签： htmlcss

Answer 1

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