DEMO CSS :checked

by Adi Jaya

HTML

<section>
	<input class="check" type="checkbox" id="check_0"/>
	<div class="content">Lorem Ipsum</div>
	<label class="label_show" for="check_0"></label>
</section>
  
<section>
	<input class="check" type="checkbox" id="check_1"/>
	<div class="content">Hello</div>
	<label class="label_show" for="check_1"></label>
</section>

<section>
	<input class="check" type="checkbox" id="check_3"/>
	<div class="content">Lorem</div>
	<label class="label_show" for="check_3"></label>
</section>

CSS

section {
    margin: 1em 0;
    border: 1px solid silver;
    padding: 15px;
}

.check {
    display: none;
}

.label_show {
    display: inline-block;
}

.label_show::after {
    border: 1px solid;
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 2em;
    margin: 1em 0;
    font-size: x-small;
    cursor: pointer;
}

.check:checked ~ .content {
    color: red;
}

.check:checked ~ .label_show::after {
    content: "YES";
    color: green;
}

.check:not(:checked) ~ .label_show::after {
    content: "Check";
    color: blue;
}