html - 单击复选框时如何显示标签

单击复选框时如何显示此标记<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
}

最佳答案

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