html - HTML 可折叠按钮 - 如何将按钮突出显示为 href？

Question

我想为我的学术网站创建一个可折叠按钮，并发现这个问题的答案非常有帮助：HTML 可折叠按钮 - 如何使 div 出现在按钮之后？. 所以我按照答案编写了以下代码：

#hidden {
  display: none;
}

:checked~#hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;"> My paper title. 
<label for="my_checkbox">Abstract</label>
<div id="hidden">this is my abstract.</div>

这行得通，但我想像 href 一样突出显示“抽象”按钮，以便我们看到它是可点击的。我应该如何编辑css以使按钮显示为href？

非常感谢！

标签： htmlcss

Answer 1

只需使用和选择器一起使用与a标签相同的样式：color: bluetext-decoration: underline:hover

label {
  color: blue;
}

label:hover {
  text-decoration: underline;
  cursor: pointer;
}

#hidden {
  display: none;
}

:checked~#hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;"> My paper title. 
<label for="my_checkbox">Abstract</label>
<div id="hidden">this is my abstract.</div>