CSSだけで三本線のメニューを美しく表示させたい。

目標

• もはや維持だけになっているjQuery縛りで、CSSのみで三本線のメニューを美しく表示させたい。
• 調べて行くうちに、ラジオボタンを使う方法がいいのではないかと判断したがうまくできない現状。

参考にしたサイト

• CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要
• 3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる

大まかなHTML構成 - 動作確認サンプル

<nav>
<input type="checkbox" id="nav"/>
<label for="nav">
<span class="nav-btn"></span>
<div class="nav-content">コンテンツだよ！</div>
</label>
</nav>

使用してみたCSS

nav {
  position: relative;
}
nav label {
  height: auto;
}
.nav-content {
  display: none;
}
.nav-btn {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #000;
  transition: .2s;
}
.nav-btn:before,.nav-btn:after{
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #000;
  transition: .3s;
}
.nav-btn:before{
  margin-top: -6px;
}
.nav-btn:after{
  margin-top: 4px;
}

input:checked .nav-content {
  display: block;
}
input:checked .nav-btn:before, input:checked .nav-btn:after{
  margin-top: 0;
}
input:checked .nav-btn:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
input:checked .nav-btn:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

要望

• CSSのみで完結させたい

CSSのラジオボタンを使うのはほぼ初めてで全然うまくいかなかったので、解決方法がわかる方は教えてください