javascript - 我可以使用 div :before as an anchor to toggle visibility of the rest of the div? 的内容吗

Question

我有以下 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:

This is trivial.

我想使用“Proof:”关键字来切换证明的可见性(这里是句子“This is trivial.”)onclick。

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

Answer 1

答案是肯定的:

也许 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。如果您悬停或单击伪元素，您同时单击或悬停了元素本身。