CSS : アイコンのタップ範囲を表示に影響なく広げる #CSS

16x16のアイコンをスマホ、タブレットでタップさせるのは厳しい
でも不格好なのでアイコンを大きくしたくない

以上の要件から生まれたのがコレ↓

See the Pen アイコンのタップ範囲を広げるスタイル by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

従来のアイコン要素に一つクラスを加えるのみで実現させている。

HTML

<i class="fas fa-question-circle taparea"></i>

Font Awesome標準のアイコン表示にtapareaクラスを付与しているだけ。

CSS

.taparea {
  position: relative;
}
.taparea:after {
  display: block;
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: -12px;
  left: -12px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.2); /* 分かりやすくするための色付け。実装時は外す */
}

40x40の:after要素がアイコンの中央に来るように生成しています。
absolute配置なのでアイコン以外の要素を邪魔しません。