リストの先頭記号はクリックできない

HTMLの「リスト」を使ってリンクを掲載した場合、リストの先頭記号はクリックできません。 例えば、下記のリンクリストでは、文字部分はクリック可能ですが、先頭記号はクリック不可能です。
※リンクの範囲を分かりやすくするため、マウスを載せた際の背景色・文字色を変化させています。


上記のようにデフォルトの記号であれば、クリックしようとは思われないかもしれません。 しかし、以下のように別のアイコン(■)に変更した場合は、記号をクリックしようと思われるかもしれません。


リストの先頭記号もクリック可能にする

下記のリンクでは、リストの先頭アイコンもクリック可能です。実際にマウスを載せて試してみて下さい。 リンク文字の部分だけでなく、先頭のアイコンもクリックできます。

今回は、上記サンプルのように、リストの先頭画像(アイコン)も一緒にクリック可能にする方法をご紹介いたします。

もちろん、img要素を使ってリンク内に画像を表示させるわけではありません。 短いスタイルシートを記述するだけで実現可能です。