console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Cssで画像のリンクを作る時にハマった

最近はPerlの勉強ばっかしてて、記事にできるほどのものが何もない・・。

というわけで、レベルの低さがバレるのがアレですが、ハマったネタを。
気付くのに10分かかった!

なにはともあれソースとサンプル

参考:疑似要素とaタグ

Html

<ul>
	<li><a href="/">hoge</a></li>
</ul>

Css

li {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #eee;
}

li::after {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0094c8;
  content: "li::afterで画像とか置くとクリック・タップできない";
}

a {
  position: relative;
  top: 10px;
  left: 10px;
  display: block;
  width: 180px;
  height: 180px;
  background-color: #fff;
}

a::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  content: "a::afterなら大丈夫";
}

よくある画像のリンク

実際はただのaタグなんやけど、Cssスプライトで画像をはめて・・ってパターン。

疑似要素はあくまで"疑似"要素

なので、a::beforeもa::afterも普通にアンカーとして動作するし、liはliやので。
そら上に重ねたら押せへんくなるよねーっていう。

ただ、

  • 画像ボタンにしたい
  • aタグのbefore/afterは既に使われてる

みたいな場合は、もはや空div様でも使うしかないんかしらねー。