javascript - 我可以使用div:before的内容作为 anchor 来切换div其余部分的可见性吗？

我有以下CSS（来自Zachary Harmany的blog post的想法）：

.proof{
    display: block;
    content: "Proof:";
}
.proof:before {
    content: inherit;
    font-style: italic;
}

然后html

<div class="proof"> This is trivial. </div>

产生类似：


  证明：
  
  这是微不足道的。


我想使用“ Proof：”关键字来切换证明的可见性（这里的句子“这很简单”）。

是否可以使用.proof：before的内容作为锚点来切换其余.proof内容的可见性？

最佳答案

答案是肯定的：

也许height和pointer-events可以帮助您表明可能：

.proof{
  height:1.2em;
  overflow:hidden;
  pointer-events:auto;

}
.proof:before {
  content: "Proof: onclick toggles show/hide real content";
  display:block;
  font-style: italic;
  cursor:pointer;
}
.proof:active , .proof:focus {
  height:auto;
  pointer-events:none;
  outline:none;
  }

<div class="proof" tabindex="0"> This is trivial. you see me or not onclick :) </div>

因此，您需要从元素本身捕获onclick。
如果您悬停或单击伪元素，则同时单击或悬停元素本身。