如何仅使用CSS修改HTML提交按钮的显示文本内容

失效原因 #

<input> 属于替换元素，默认不支持 ::after/::before 伪元素的渲染，这是你之前的代码只隐藏了原有文字、没有显示替换文本的核心原因。

实现代码 #

直接替换你现有的CSS为以下内容即可：

input.submit-btn {
  background-color: black;
  padding: 2%;
  border-radius: 8px;
  font-size: 17px;
  /* 隐藏原有文字 + 为伪元素提供定位基准 */
  position: relative;
  color: transparent;
  overflow: hidden;
}

input.submit-btn::after {
  content: "Submit";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 文字居中对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

效果说明 #

该方案不会修改按钮原有功能和其他样式，仅替换显示文本，兼容所有现代主流浏览器。

内容的提问来源于stack exchange，提问作者Diya Giriyan