css - 選択ボックス要素と :after

Question

なぜ機能しないのですか？余分な要素を追加せずにこれを回避する方法はありますか?

score 13 · Accepted Answer

あなたのフィドルでは、次の宣言はおそらくあなたが期待することをしていません。

select:after {content: "This doesn't work";}

これにより、実際には、選択ボックス自体の後ではなく、選択ボックスのコンテンツの後にテキストが追加されます。そのため、テキストはoptionマークアップの最後の後に追加されています。(もちろんこれは有効ではなく、ブラウザによってレンダリングされることもありません。)

つまり、このマークアップがある場合:

<a href="#">My link</a>

そしてこのCSS：

a:after {content: " has now been appended to";}

実際に起こっていることは次のとおりです。

<a href="#">My link has now been appended to</a>

score -3 · Accepted Answer

そのようなことには jQuery API を使用することをお勧めします。

$(document).ready(function(){
    $("select").after("<div>this doesnt work, or does it?</div>");
});

2 に答える 2