如何解决.button:hover触发时按钮内容消失变为白条的问题？

问题原因 #

你当前的代码在按钮悬停时隐藏了原有的<span>文本，试图通过:before伪元素重新生成文字，但伪元素缺少必要的显示样式，导致悬停后仅显示白色背景，文字未正常渲染，看起来像一条白条。

修复方案 #

方案一：简化代码（推荐）

无需使用伪元素替换文本，直接修改悬停状态下按钮的背景色和文字颜色即可，逻辑更简洁：

.buttonM {
  width: 100%;
  border: 1px solid #fff;
  background: #de5426;
  padding: 3px 21px;
  color: #ffffff;
  font-size: x-large;
  font-family: "montserrat", Arial, Helvetica, sans-serif;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 1px;
  font-weight: bolder;
}

.buttonM:hover {
  background-color: #fff;
  color: #de5426;
  cursor: pointer;
}

<button class="buttonM">
    <span>Middle School</span>
</button>

方案二：修复伪元素显示（保留原逻辑）

如果需要保留伪元素替换的逻辑，需为:before添加必要样式确保文字正常显示：

.buttonM {
  width: 100%;
  border: 1px solid #fff;
  background: #de5426;
  padding: 3px 21px;
  color: #ffffff;
  font-size: x-large;
  font-family: "montserrat", Arial, Helvetica, sans-serif;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 1px;
  font-weight: bolder;
  position: relative;
}

.buttonM:hover span {
  display: none;
}

.buttonM:hover {
  background-color: #fff;
  color: #de5426;
  cursor: pointer;
}

.buttonM:hover:before {
  content: "Middle School";
  display: inline-block;
  width: 100%;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者Shlok Ippala