select not adding pseudo after selector - html

Question

I want to add a font-awesome arrow to my select but the :after selector does not appear to be being applied:
The focus is not being applied either for some reason.
select {
border: 1px solid #727272;
-webkit-appearance: none;
border-radius: 0;
width: 50%;
padding: 10px;
}
.select:after {
content: "\F0DA";
font-family: FontAwesome;
font-size: 20px;
color: black;
}
select:focus: {
outline: 3px solid #ffbf47 !important;
outline-offset: 0;
}
<div>
<select class="select">
<option>One</option>
<option>Two</option>
</select>
</div>

Answer 1

As i said in comment you can not use pseudo on select instead wrap your select with a div then use pseudo on it.
select {
border: 1px solid #727272;
-webkit-appearance: none;
border-radius: 0;
width: 100%;
padding: 10px;
}
.select-option {
position: relative;
width: 50%;
}
.select-option::after {
content: "\F0DA";
font-family: FontAwesome;
font-size: 20px;
color: black;
position: absolute;
right: 10px;
top: 7px;
}
select:focus {
outline: 3px solid #ffbf47 !important;
outline-offset: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="select-option">
<select class="select">
<option>One</option>
<option>Two</option>
</select>
</div>
If you want to use this arrow instead of default select option arrow on your select you need set position: absolute for ::after element.
.select-option::after {
content: "\F0DA";
font-family: FontAwesome;
font-size: 20px;
color: black;
position: absolute;
right: 10px;
top: 7px;
}
Don't forget to set position: relative on parent .select-option and i change your code a little for move width: 50% to parent and set width: 100% on select.
And note that, correct is ::after not :after. CSS3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :after, introduced in CSS2.
More info here.
And last word is, this is a common issue that you can't set ::after or ::before on select option possible there are many topics with this title, google, stackoverflow and etc.. anyway.