如何仅用CSS创建点击后显示隐藏文本的按钮？

可以利用CSS的:checked伪类结合隐藏的复选框来实现，完全不需要JS，且对触屏设备友好，操作逻辑直观：

HTML结构 #

<!-- 隐藏的复选框，用于记录点击状态 -->
<input type="checkbox" id="toggle-btn" class="hidden-checkbox">
<!-- 用label作为可点击的按钮，关联复选框 -->
<label for="toggle-btn" class="click-btn">点击我</label>
<!-- 要显示的文本，默认隐藏 -->
<div class="show-text">这是你指定要显示的文本内容</div>

CSS样式 #

/* 隐藏原生复选框 */
.hidden-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 按钮样式，可自定义 */
.click-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #2196F3;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  /* 触屏设备点击反馈 */
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}

/* 默认状态下隐藏文本 */
.show-text {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #eee;
  display: none;
}

/* 复选框被选中时，显示相邻的文本元素 */
.hidden-checkbox:checked + .click-btn + .show-text {
  display: block;
}

方案说明 #

• 利用隐藏的复选框记录点击状态，label标签和复选框关联，点击label就等同于点击复选框，触发:checked状态变化
• 触屏设备上点击label的体验和点击按钮完全一致，不需要依赖hover伪类，解决了触屏交互不直观的问题
• 不需要额外添加“点击这里”的提示，按钮本身的可点击样式（比如背景色、光标样式）已经能引导用户操作
• 所有样式都可自定义，按钮外观、文本样式都能根据需求调整

内容的提问来源于stack exchange，提问作者Dalton Mowrey