css - の絶対配置

Question

次のfiddleでは、チェックボックスが配置されている div がコンテンツ自体よりも大きい理由を見つけようとしています (これは、空のチェックボックスのイメージにすぎません)。私はフィドラーで見られるのと同じことを達成しようとしていますが、基礎となる . 問題はこのCSSスタイルに関連していると思います:

.selectable-content label:after {
    background: white;
    color: #9fc5e8;
    content:"\f096";
    position:absolute;
}

Answer 1

によって作成された要素:afterには文字が含まれていますが、背景も白です。この要素は DOM の後半にあり、親の右下に配置されるため、背景に重なって表示されます。

これは、実際の画像の半透明の画像を作成し、CSS から白色を削除することで修正できます。