はじめに

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

現象の再現

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

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

目次

枠とボタンを作ってみる

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

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

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

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

HTML

<div class="box01">
　<a href="#" class="bottun01">Click</a>
</div>

CSS

.box01 {
　position:relative;
}
.box01:after {
　content: "";
　display: block;
　position: absolute;
　border: 4px solid #fff;
　top: 4px;
　left: 4px;
　width: calc(100% - 20px);
　min-height: calc(100% - 20px);
　border: 6px solid #ccc;
}
.bottun01 {
　display:inline-block;
　width:200px;
　height:60px;
　line-height:60px;
　background:#338DC9;
　text-align:center;
　color:#fff;
　text-decoration:none;
}
.bottun01:hover {
　background: #E99E18;
}

できあがったもの

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

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

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

CSS（疑似要素部分のみ）

.box01:after {
　content: "";
　display: block;
　position: absolute;
　border: 4px solid #fff;
　top: 4px;
　left: 4px;
　width: calc(100% - 20px);
　min-height: calc(100% - 20px);
　border: 6px solid #ccc;
　pointer-events: none;
}

できあがったもの