html - 单击复选框时如何使标 checkout 现

Question

如何制作这个标签<h3>单击复选框时出现？现在它是隐藏的。

<h3 class="bark">Bark Bark</h3>
<input type="checkbox" class="title">Hear a dog</input>

CSS:

.bark{ 
  visibility: hidden
}

input[type="checkbox"]:checked  {
visibility: visible  
}

Answer 1

.bark{ 
  visibility: hidden
}

input[type="checkbox"]:checked + h3.bark  {
visibility: visible  
}

<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>