大きなカード内の文字を上下左右中央にしてリンクをカード全体にかける

cssで高さのあるカードをリンクで覆いたい場合の方法。
やり方はいろいろあるようでしたが疑似要素を使ってできるようなのでメモしておきます。

疑似要素（::after や ::before）を使ってリンクの範囲を広げることができるのですね。
一応、メモしておきます。

• あいうえお
• かきくけこ
• さしすせそ
• たちつてと

こんな高さのあるカードをならべてリンクがカードを覆うようにしたい。

<ul class="card">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
<li><a href="#">たちつてと</a></li>
</ul>

.card li {
  width: 160px;
  height: 160px;
  float: left;
  position: relative;
  display: flex;
  align-items: center;
  margin: 5px;
  border: 1px solid #555;
  text-align: center; }
.card li a {
  width: 100%;
  display: block; }
.card li a::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }