teratailのような通知ベルアイコン（トグルメニュー）を作りたい

Question

jsを使わずCSSだけでteratailのベルアイコンを作ろうとしてます。

ここ
から近いサンプルを落としてましたが、改良できずにいます。

teratailのように、ベルアイコンの幅を狭く、クリックされた時のメニューだけ広くしたいのですが、下のようにベルアイコンも幅広になってしまいます。

イメージ的には、正方形の真ん中にベルアイコンを配置したいです。
どう調整すれば良いでしょうか？
分かる方教えて下さい。宜しくお願いします。

$menuAppearDuration : .3s;
$bumpUpDelay : $menuAppearDuration - 0.1s;

@keyframes bumpUp{
  20%{ transform:translateY(-4px); }
  100%{ transform:none; }
}  

.toggle-menu{ list-style:none; padding:0; margin:3em auto; width:600px; color:#242C35;
  > li{ display:block; // margin:1em 0 0;  
    > input{ display:none; 
      
      &:checked{
        ~ label{ box-shadow:0 0 8px rgba(0,0,0,.5); animation:none; transition:.1s; 
          > .toggle-menu-icon{
            &::before{ opacity:0; transform:rotate(45deg); text-shadow:0 0 3px #333; }
            &::after{ transform:none; transform:rotate(180deg); }
          }
        }
        
        ~ .options{ 
          > ul{ margin-bottom:2em;
             > li{ margin:0; opacity:1; }
          } 
        }
      }
    }
    
    > label{ 
      display:block; 
      padding:1em 1em 1em 3em; 
      background:#FFF; 
      position:relative; 
      z-index:1; 
      border-radius:3px; 
      font-weight:600; 
      cursor:pointer; 
      box-shadow:0 0 0 #FFF; 
      transition:.1s; 
      // animation:.22s $bumpUpDelay 1 bumpUp ease-out;
      
      &:hover{
        background:rgba(white, .8);
      }
      
      $toggleSize : 1.2em; 
      
      > .toggle-menu-icon { 
          position:absolute; 
          width: $toggleSize;
          height:$toggleSize; 
          left:.8em; top:0; bottom:0; 
          margin:auto;
          &::before, &::after{ 
            content:''; 
            position:absolute; 
            background:#AAA; 
            transition:.3s cubic-bezier(.45,.01,.27,1.4); 
          }
          &::before{ width:2px; height:100%; left:calc(50% - 2px); margin-left:1px;  }
          &::after{ width:100%; height:2px; top:calc(50% - 1px); }
        }
      }
    
    > .options{ position:relative; overflow:hidden;
      > ul{ 
        font-size:.9em; 
        list-style:none; 
        margin:-1em .6em 1em; 
        padding:0; 
        border-radius:0 0 4px 4px; 
        border:5px solid rgba(255,255,255,.15); 
        transition:$menuAppearDuration cubic-bezier(.45,.01,.27, 2); 
        perspective:600px;
        
        > li{ 
          padding:.5em 1em; 
          margin-top:-5em; 
          border-bottom:1px solid #E1E1E1; 
          position:relative; 
          cursor:pointer; 
          background:#F6F6F6; 
          color:#666; 
          transition:$menuAppearDuration ease; 
          transition-property:margin, opacity;
          
          @for $i from 2 to 12{
           // &:nth-child(#{$i}){ transition-delay:$menuAppearDuration/2 * $i; z-index:12 - $i; }
          }
          
          &:first-child{ padding-top:1.2em; } 
          &:last-child{ border:0; border-radius:0 0 3px 3px; } 
          &:hover{ 
            background:lightyellow; 
            box-shadow:5px 0 rgba(lightyellow,.1), -5px 0 rgba(lightyellow,.1); }
        }
      }
    }
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<ul class="toggle-menu">
    <li>
        <input type="checkbox" id="item1" />
        <label for="item1">
            <i class="fas fa-bell "></i>
        </label>
        <div class="options">
            <ul>
                <li>「いいね」されました</li>
                <li>フォローされました</li>
                <li>システムからお知らせが届きました</li>
            </ul>
        </div>
    </li>
</ul>

Answer 1

幅を設定して、text-align: center; で中央寄せすればいいのでは。

//前略

    > label{ 
      display: block;
      width: 3em;
      line-height: 3;
      text-align: center;
      background:#FFF; 
      position:relative; 


//攻略

Answer 2

svgで書いてcssで設定するとよいのでは？
メニューの動作はcheckboxで処理してください

Answer 3

お騒がせしてすみません。自己解決したところでした。

いただいた回答は参考にさせていただきます。有難う御座います。

label{

  width:60px;
  padding:1em 1em 1em 1.4em;