在<；中交换文本；按钮>；on:onclick与普通HTML/CSS

就像主题一样简单。我正在寻找在用户点击按钮后改变按钮内部文本的方法，而不使用JS等。 谢谢

已更新

如果需要button元素，可以尝试使用：：after伪选择器。但它会有一点车

例如

button:after{
   content: 'some content';
   display: block;
}
button:hover:after,
button:focus:after,
button:active:after{
   content: 'some other content';
   display: block;
}

如果不需要按钮元素，则有另一种解决方案。

CSS

HTML

---

但请注意，在html元素中交换文本并不是一种正确的方法

它必须是

元素吗？下面是一个示例。您可以看到，当按钮聚焦时，文本只会发生变化。但我也认为这是你能得到的最接近的。这就是我们可以用button元素做的事情。如果不需要使用此元素，我们可以使用带有输入的标签。这样会更好。我会马上更新我的以上答案。

input[type=checkbox]{
   display: none;
}
input[type=checkbox] + label:after {
   content: 'some content';
   display: block;
} 
input[type=checkbox]:checked + label:after {
   content: 'some other content';
   display: block;
}

 <input type="checkbox" id="hidden-input" name="hidden-input"> 
 <label for="hidden-input"></label>