選択後のアイコンフォントが表示されない

Question

selectoptionの後にアイコンフォントを使用したいが、動作しない。あなたは何が間違っているか知っていますか？アフターセレクターはこの目的のセレクターではありませんか？ selectの後にアイコンフォントを挿入するには？

.container { 
 
    width: 80%; 
 
    margin: 0% 10%; 
 
} 
 

 
select { 
 
    width: 30%; 
 
    border: 1px solid #ccc; 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    cursor: pointer; 
 
    font-size: 1em; 
 
    padding: 10px; 
 
} 
 

 
select:after { 
 
    content: "\f0d7"; 
 
    font-family: "FontAwesome"; 
 
    font-size: 11px; 
 
    color: #aaa; 
 
    right: 8px; 
 
    top: 4px; 
 
    padding: 0 0 2px; 
 
    position: absolute; 
 
    pointer-events: none; 
 
}

<div class="container"> 
 
<select class="box box-nomargin"> 
 
    <option selected>All Options </option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 
<select class="box box-nomargin"> 
 
    <option selected>All Options </option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 
</div>

例：https://jsfiddle.net/a3gLLaov/2/