Могу ли я использовать содержимое div: раньше в качестве привязки для переключения видимости остальной части div?

Question

У меня есть следующие CSS (идея от blog post из Zachary Хармани):

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

Тогда HTML

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

производит что-то вроде:

Доказательство:

Это тривиально.

Я хотел бы использовать «Доказательство» («Это тривиально» здесь предложение) ключевое слово, чтобы переключить видимость доказательства OnClick.

Можно ли использовать содержимое .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 от самого элемента. Если вы наведете или щелкните псевдоэлементы, вы тем временем нажмете или наведете элемент.

Answer 2

Вы можете использовать РОМ атрибуты, как псевдопользователей детей

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

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

Если теперь целевой РОМ атрибутов элементов, вы могли бы быть на один шаг ближе к разгадке вещи