<input type="checkbox" id="input" />
<label for="input" style="user-select: none">click me</label>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ut labore voluptatem ipsa vel tenetur
obcaecati, sint sit nostrum saepe! Hic debitis voluptatum quas earum quam fugiat expedita blanditiis
similique.
</p>
input[type="checkbox"] {
& ~ p {
display: none;
transition: all 0.7s;
}
&:checked ~ p {
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.