疑似要素を使ったらクリックできなくなった話とその解消法

はじめに

先日、メールフォーム部分のコーディング時、装飾のため疑似要素:beforeを使用したら、フォームのボタンをクリックできなくなることがありました。

現象の再現

クリックできない現象を説明すると、例えば下の例は、全体の外枠を二重にする為に疑似要素:beforeを使っています。

今回はリンクボタンを作成していますが、本来<a href=""></a>で作成しているのでクリックできるはずですが、疑似要素があるためクリックできません（これがリンクでなくフォームでも同様にクリックできません）。

Click

目次

枠とボタンを作ってみる

まずはベースとなる枠とリンクボタンを作ります。

枠の部分は枠の内側にborderを設定するため疑似要素:afterを使用しています。

今回は:hover時にbackgroundがオレンジになるように設定していますが、マウスを合わせても変化しないのが分かると思います。

枠とボタンは、以下のように作成しています。

HTML

  1. <div class="box01">
  2. 　<a href="#" class="bottun01">Click</a>
  3. </div>

CSS

  1. .box01 {
  2. 　position:relative;
  3. }
  4. .box01:after {
  5. 　content: "";
  6. 　display: block;
  7. 　position: absolute;
  8. 　border: 4px solid #fff;
  9. 　top: 4px;
  10. 　left: 4px;
  11. 　width: calc(100% - 20px);
  12. 　min-height: calc(100% - 20px);
  13. 　border: 6px solid #ccc;
  14. }
  15. .bottun01 {
  16. 　display:inline-block;
  17. 　width:200px;
  18. 　height:60px;
  19. 　line-height:60px;
  20. 　background:#338DC9;
  21. 　text-align:center;
  22. 　color:#fff;
  23. 　text-decoration:none;
  24. }
  25. .bottun01:hover {
  26. 　background: #E99E18;
  27. }

できあがったもの

Click

クリックできなくなった時の解消法

それではこういった場合にどう対処したら良いかといいますと、疑似要素のCSSにpointer-events: none;を追加すると良いです。

HTMLに変更は無いため割愛します。

CSS（疑似要素部分のみ）

  1. .box01:after {
  2. 　content: "";
  3. 　display: block;
  4. 　position: absolute;
  5. 　border: 4px solid #fff;
  6. 　top: 4px;
  7. 　left: 4px;
  8. 　width: calc(100% - 20px);
  9. 　min-height: calc(100% - 20px);
  10. 　border: 6px solid #ccc;
  11. 　pointer-events: none;
  12. }

できあがったもの

Click
古い投稿テキストを上下中央に配置するCSS設定（5種類） 新しい投稿CSSのみでグラデーションの三角形を作る方法