ハンバーガーメニューが閉じません

Question

前提・実現したいこと

ハンバーガーメニュー内の文字をクリックした際に、同時にハンバーガーメニューを
閉じるようにしたいです。
今のままでは、ハンバーガーメニュー内の文字をクリックしてもハンバーガーメニューが開いたままです。プログラミングに詳しい方、ご教示お願い致します。

また、こちらはcssのみで作成しております。

何卒宜しくお願い致します！

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

ハンバーガーメニュー内の文字をクリックしても、ハンバーガーメニューが閉じません。

該当のソースコード

HTML

<input id="menu" type="checkbox" /> <label for="menu" class="open"><i class="fas fa-bars"></i></label> <label for="menu" class="back"></label> <aside class="aside"> <label for="menu" class="close">×</label> <nav> <div> </div> <ul class="aside_list"> <li><a href="#about">テキスト</a></li> <li><a href="#skill">テキスト</a></li> <li><a href="#strength">テキスト</a></li> <li><a href="#site">テキスト</a></li> <li><a href="#repro">テキスト</a></li> <li><a href="#contact">テキスト</a></li> </ul> </nav> </aside>

CSS
.open,
.close {
display: block;
font-size: 30px;
padding-left: 10px;
}

.open {
position: absolute;
top: 0;
z-index: 10;
}
.aside {
width: 250px;
position: absolute;
left: -250px;
height: 100%;
transition: all 0.2s;
background: #ffffff;
z-index: 100;
top: 0;
}

input[type="checkbox"]:checked ~ .aside {
left: 0;
}

input[type="checkbox"]:checked ~ .back {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8) ;
z-index: 50;
}

試したこと

input[type="checkbox"]:none(:target) {
left:-250px;
}

としても、現状変化なしでした。

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

ここにより詳細な情報を記載してください。

Answer 1

以下のようにすればいいのでは？

<ul class="aside_list">
  <li><a href="#about"><label for="menu">テキスト</label></a></li>
  <li><a href="#skill"><label for="menu">テキスト</label></a></li>
  <li><a href="#strength"><label for="menu">テキスト</label></a></li>
  <li><a href="#site"><label for="menu">テキスト</label></a></li>
  <li><a href="#repro"><label for="menu">テキスト</label></a></li>
  <li><a href="#contact"><label for="menu">テキスト</label></a></li>
</ul>

Comments

[OdwRuEawfvOdrP7]

ご回答ありがとうございます。
root_jp様のコードを試してみましたところ、
ハンバーガーメニューは閉じるようになりましたが、<a>のページ内リンクが利きませんでした。
せっかくなのに申し訳ございません。
何か解決策がございましたら、教えていただければ幸いです。

[root_jp]

どうやらHTMLだけで解決するのは難しいようですね。
以下に同じような質問があったので参考にしてみてください。
https://teratail.com/questions/163080

私が提示したコードは、<a>タグの中に<label>タグを書いてますが、
これはHTMLの文法上よろしくないという事も上記の質問に書いてますので、
<label><a>という順序にしたほうがまだいいみたいですね。

[OdwRuEawfvOdrP7]

リンクまで付けて頂き、ありがとうございます。
jsを追加しまして、修正したいと思います。
ご回答いただき誠にありがとうございました！