CSSの :cheked +～が機能しない

Question

前提・実現したいこと

:checked で表示内容を切り替えたい

発生している問題・エラーメッセージ

:cheked +～が機能しない

該当のソースコード

<div class="teetime-fold">
    <label class="fold-label" for="fold_bar01">タイトル</label>
    <input class="fold-input"type="checkbox" id="fold_bar01" />
    <ul id="links01">
      <li>  
        <table border="0" cellpadding="10" width="100%">
          <tr>
            <td bgcolor="#2D2D2D">
            コンテンツ内容
            </td>
          </tr>
        </table>
      </li>
    </ul>
</div>

.fold-label:before{
    background: #666;
    box-sizing: border-box;
    content: "▼";
    font-size: 160%;
    display: block;
    height: 46px;
    width: 46px;
    text-align: center;
    padding: 10px;
    position: absolute;
    left: 0;
    top: 0px;
}
.fold-input {
    display: none;
}
.teetime-fold li {
    height: 0;
    overflow: hidden;
}
#fold_bar01:checked ~ #links01 li {
    height: auto;
    opacity: 1;
}
#fold_bar01:checked + .fold-label:before {
    content: "－";
}

試したこと

+を~に変える、削除する、コンテンツの中身を変えてみる等

補足情報（FW/ツールのバージョンなど）

cssの#fold_bar01:checked ~ #links01 li {
height: auto;
opacity: 1;
}
は効いてます。

Answer 1

#fold_bar01:checked + .fold-labelは、「#fold_bar01の直後にある.fold-label」という意味ですが、そのようなエレメントは存在しません。

Comments

[takumin121]

.fold-label:before を.fold-label:afterにすれば直後になるから治るかなと思い、書き換えましたが反映されません。そういう問題ではないのでしょうか？

[maisumakun]

> そういう問題ではないのでしょうか？

全く関係ありません。.fold-labelは#fold_bar01の「直前」にあります。直後ではありません。

[takumin121]

なるほど、理解しました。
idとforが一緒だったので、混同していました。
inputを一行前にしたら治りました。ありがとうございます。

Answer 2

効かない原因は、maisumakunさんの回答の通りです。
よって、
label と input の前後を入れ替えれば効くようになるでしょう。

    <input class="fold-input"type="checkbox" id="fold_bar01" />
    <label class="fold-label" for="fold_bar01">タイトル</label>

ベストアンサーはmaisumakunさんにどうぞ。