リンクとリストの位置がずれてしまって困っています。

Question

前提・実現したいこと

カレンダーのイメージでレイアウトを作りたいのですが、リストにリンクを入れるとリストの枠からはみ出してしまうのを何とかしたいです。
リストとリンクが重なるように、またリンクの文字が枠の中央になるようにようにしたいのですが、解決方法がわからず困っています。
HTML/CSSは独学であまり詳しくないのでわかりやすく教えていただけると嬉しいです。

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

該当のソースコード

body{
 text-align:center;
 font-size:15px;
}
ul{
 border:solid 1px;
 width:23em;
 margin:5em auto;
 padding:0;
}
li{
 display:inline-block;
 position:relative;
 list-style:none;
 border:solid 1px;
 width:2.5em;
 height:2.5em;
 margin:2em 0;
}
li::before{
 display:inline-block;
 position:relative;
 content:"*";
 border:solid 1px;
 top:-1.5em;
 width:2.5em;
 height:1em;
}
li a{
 display:block;
 text-decoration:none;
 width:100%;
 height:100%;
 border:solid 1px;
}

  <ul>
    <li></li>
    <li></li>
    <li><a href="/">あ</a></li>
    <li><a href="/">い</a></li>
    <li><a href="/">う</a></li>
    <li><a href="/">え</a></li>
    <li><a href="/">お</a></li>

    <li><a href="/">か</a></li>
    <li><a href="/">き</a></li>
    <li><a href="/">く</a></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

Answer 1

li a{
  position:absolute;
  top:0;
  left:0;
  line-height:2.5em;
}

を加えてください。

Comments

[no_6]

ありがとうございます、解決しました！