selectタグに::before ::afterなどの疑似要素を追加する方法【CSS】

結論から言うとselectタグには::beforeや::afterの疑似要素を当てることはできない。

そのためselectタグの親要素に擬似要素を指定して代用する。

<div class="search-pref">
  <select name="pref[]">
    <option>都道府県</option>
    <optgroup label="北海道・東北">
      <option value="1">北海道</option>
      <option value="2">青森県</option>
      <option value="3">岩手県</option>
      <option value="4">宮城県</option>
      <option value="5">秋田県</option>
      <option value="6">山形県</option>
      <option value="7">福島県</option>
    </optgroup>
    <optgroup label="関東">
      <option value="8">茨城県</option>
      <option value="9">栃木県</option>
      <option value="10">群馬県</option>
      <option value="11">埼玉県</option>
      <option value="12">千葉県</option>
      <option value="13">東京都</option>
      <option value="14">神奈川県</option>
    </optgroup>      
  </select>
</div>

このような構成だった場合、

.search-pref::before {
　/* スタイル */
}

このように親要素に擬似要素を付けて調整する。

参考：Pseudo elements and SELECT tag