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>

产生类似的东西：

证明：

这是微不足道的。

我想使用＆＃34;证明：＆＃34;用于切换证明可见性的关键字（此处为句子＆＃34;这是微不足道的。＆＃34;） onclick 。

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

Answer 1

答案是肯定的：

也许height和pointer-events有助于向您展示可能：

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

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

Answer 2

您可以将dom属性用作伪孩子

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

.proof:before{content: attr(state) ": ";}

如果您现在定位dom元素属性，那么您可能更接近于解决问题

我可以使用div的内容：之前作为锚点来切换div其余部分的可见性吗？

2 个答案: