如何实现.btn元素:hover时仅显示‘IPSUM’，替换原有内容？

问题描述 #

• 按钮结构：<div class='btn'>1</div>
• 当前CSS设置后，鼠标悬停时会显示1IPSUM（原文本+:after伪元素内容）
• 若添加:before伪元素设置content:"1"，悬停前会显示11（:before+原文本）
• 需求：鼠标悬停时仅显示"IPSUM"

解决方案1：悬停时隐藏原文本 #

适合不想修改HTML结构的场景，通过将原元素文本设为透明，保留伪元素内容显示：

.btn {
  position: relative; /* 确保伪元素有定位基准 */
}
.btn:hover {
  color: transparent; /* 隐藏原文本 */
}
.btn:hover:after {
  padding-bottom: 200px;
  content: "IPSUM";
  position: absolute;
  left: 0;
  top: 0;
  color: inherit; /* 继承默认文本颜色 */
}

解决方案2：用伪元素管理所有文本 #

移除HTML中的原文本，完全通过伪元素切换初始和悬停状态的内容，从根源避免原文本干扰：

<div class='btn'></div>

/* 初始状态显示"1" */
.btn:before {
  content: "1";
}
/* 悬停时隐藏初始文本，显示IPSUM */
.btn:hover:before {
  content: "";
}
.btn:hover:after {
  padding-bottom: 200px;
  content: "IPSUM";
}

解决方案3：通过visibility控制显示状态 #

利用visibility属性切换元素可见性，保持布局稳定的同时实现需求：

.btn {
  position: relative;
}
.btn:hover {
  visibility: hidden; /* 隐藏原元素 */
}
.btn:hover:after {
  padding-bottom: 200px;
  content: "IPSUM";
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible; /* 强制伪元素显示 */
}

内容的提问来源于stack exchange，提问作者Mason Jantzi