アイコンより大きいヒットエリアを ::after で確保する
見た目は 16px のまま、::after で見えない 44px のタップ領域を広げて押しやすくする。
どんな時に使う？
ツールバーやカード上の小さなアイコンボタンが押しにくいとき。見た目の余白は詰めたまま、モバイルの推奨タップサイズ（おおよそ 44×44px）だけ確保したい場合に便利。
コード
css
.icon-button {
position: relative;
/* 見た目のアイコンサイズ例: 16×16 */
width: 16px;
height: 16px;
}
.icon-button::after {
content: "";
position: absolute;
/* (44 - 16) / 2 = 14 → 各方向に 14px 伸ばす */
inset: -14px;
}::afterは透明なまま重なるので見た目は変わらないが、クリック／タップの当たり判定は広がる。insetの代わりにtop/left/width/heightで中央 44px の箱を置いても同じ。
注意点・対応状況
- 広げすぎると隣のボタンとヒット領域が重なる。アイコン間隔が狭い UI では実測して調整する。
- キーボード操作ではフォーカスリングが元の要素サイズ基準になることがある。
:focus-visibleのアウトラインも合わせて確認する。 - 疑似要素でなく
paddingを増やす手もあるが、レイアウトに余白が乗る。見た目を崩したくないときだけ::afterが向く。