如何插入在文本更改时保持固定的文本下划线？

<p class="underline-text">这是需要添加下划线的文本</p>

.underline-text {
  position: relative;
}

.underline-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000; /* 下划线颜色 */
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

.underline-text:hover::after {
  visibility: visible;
  transform: scaleX(1);
}

<p class="underline-text">这是需要添加下划线的文本</p>