如何减少按钮悬停时的底部边框长度？

button:hover {
  border-bottom: 2px solid red; /* 设置底部边框为红色，长度为2像素 */
}

button {
  border-bottom: 1px solid black; /* 设置默认的底部边框样式 */
  transition: border-bottom 0.3s; /* 设置底部边框的过渡效果持续时间为0.3秒 */
}

button:hover {
  border-bottom: 2px solid red; /* 设置悬停时的底部边框为红色，长度为2像素 */
}

<button id="myButton">按钮</button>

<script>
var button = document.getElementById("myButton");
button.addEventListener("mouseover", function() {
  button.style.borderBottom = "2px solid red"; /* 设置悬停时的底部边框为红色，长度为2像素 */
});

button.addEventListener("mouseout", function() {
  button.style.borderBottom = "1px solid black"; /* 恢复默认的底部边框样式 */
});
</script>