仅使用css加载更多按钮

Question

我只使用css进行加载更多按钮，但是如果我使用<ul> </ul>标记代码则不再有效。

文字Hide不再显示（已经解决）

我做错了什么？

此处链接：https://jsfiddle.net/diogowernik/2sg3j4qg/13/

.speedlist {
  position: relative;
}
.speedlist li {
  display: inline;
  margin: 30px
}
.speedlist:before,
.speedlist:after {
  content: "";
  display: inline;
}
.speedlist:after {
  clear: both
}
.speedlist li:nth-child(n+11) {
  display: none;
  visibility: hidden;
}
input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
[for="load_more"] {
  bottom: -3rem;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.1) inset, -1px -1px rgba(0, 0, 0, 0.1) inset;
  left: 30px;
  padding: 0.65rem;
  position: absolute;
  text-align: center;
  width: 85%;
}
[for="load_more"]:hover {
  background: #CFCFCF;
  color: #FFF;
}
[for="load_more"] span:last-of-type {
  display: none;
  visibility: hidden;
}
input[type=checkbox]:checked ~ li {
  display: inline;
  visibility: visible;
}
input[type=checkbox]:checked ~ [for="load_more"] span:first-of-type {
  display: none;
  visibility: hidden;
}
input[type=checkbox]:checked ~ [for="load_more"] span:last-of-type {
  visibility: visible; display:block;
}

<div class="speedlist">
  <input type="checkbox" id="load_more" role="button">
  <label for="load_more" onclick=""><span>Load More</span><span>Hide</span>
  </label>
  <ul>
  <li>image01</li>
  <li>image02</li>
  <li>image03</li>
  <li>image04</li>
  <li>image05</li>
  <li>image06</li>
  <li>image07</li>
  <li>image08</li>
  <li>image09</li>
  <li>image10</li>
  <li>image11</li>
  <li>image12</li>
  <li>image13</li>
  <li>image14</li>
  <li>image15</li>
  <li>image16</li>
  </ul>
</div>

Answer 1

如果您要在<ul></ul>元素周围添加<li>，则需要更新选择器以包含ul

input[type=checkbox]:checked ~ ul li { display: inline; visibility:visible; }

Updated Fiddle