これは疑似要素の便利な使い方！レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック

Post on:2025年8月28日

sponsorsr

ボタンやアイコンなどでクリック・タップ可能なエリアを広げたいと思ったことがあると思います。a要素をブロックにしてpaddingを加えたり、JavaScriptを使用したりといった方法がありますが、今回はレイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニックを紹介します。

下記は、左は通常のクリックエリア、右はクリックエリアを広げたものです。デスクトップ時は小さいままで、スマホ時には44pxに広げるといったことも簡単にできます。

実際の動作は、下記でもページでご覧ください。左は通常のクリックエリア、右はクリックエリアを広げたものです。
「デバッグモード」をクリックすると、拡大されたクリックエリアが表示されます。

See the Pen
::after content to increase clickable area by coliss (@coliss)
on CodePen.

マウスで操作する時には操作性にそれほど違いは感じないかもしれませんが、指でタップする時には操作のしやすさがかなり変わります。

HTMLは、シンプルです。
L.5の.with-pseudoがクリックエリアを広げた方です。

    <div class="icon-container">
      <div class="icon-button">
        <span class="material-symbols-outlined">delete</span>
      </div>
      <div class="icon-button with-pseudo">
        <span class="material-symbols-outlined">delete</span>
      </div>
    </div>

<span class="material-symbols-outlined">delete</span>

</div>

<span class="material-symbols-outlined">delete</span>

</div>

クリックエリアを広げるCSSは、下記の通り。
::afterに、positon: absolute;とinset: -{value}px;を設定します。これでその要素の周囲により大きな目には見えないクリックエリアが作成され、レイアウトを変えずにクリック・タップしやすくなります。

.icon-button {
  position: relative;
}

.with-pseudo {
  &::after {
    content: '';
    position: absolute;
    inset: -0.5rem;
  }
}

.icon-button {

position: relative;

}

.with-pseudo {

&::after {

content: '';

position: absolute;

inset: -0.5rem;

}

また、Tailwindを使用している場合はユーティリティにtouch-hitboxがあり、WCAG AAAのターゲットサイズの最小値に自動的に合わせる、とのことです。

@utility touch-hitbox {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: tranlate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}

@utility touch-hitbox {

position: relative;

&:before {

content: "";

position: absolute;

display: block;

top: 50%;

left: 50%;

transform: tranlate(-50%, -50%);

width: 100%;

height: 100%;

min-height: 44px;

min-width: 44px;

z-index: 9999;

}

元ネタは、下記ポストより。

want to increase the click area without messing up your layout?

try :after with position: absolute + inset: -{value}px

this creates a larger, invisible hit area around the element, making it easier to click without changing the layout pic.twitter.com/MJpHDYhB3G

— dmytro (@pqoqubbw) August 5, 2025