スポンサーリンク

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

HTML・CSS
スポンサーリンク

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; }

コメント

タイトルとURLをコピーしました