html – Doesn't work correctly: before in option

Question:

Hello everyone.

Making a list of countries via select => option. Added: before to option and already attached a picture to them. but it does not display correctly. In other browsers, everything is ok.

<select name="permittedLists" id="permittedLists" multiple>
   <option data-before="true" data-icon="glyphicon-bfh-flag-AF">Afghanistan</option>
   <option data-before="true" data-icon="glyphicon-bfh-flag-AL">Albania</option>
   ...
</select>

option set position: relative, a option: before position: absolute.

Please tell me how to fix it)

Link to example

Answer:

First you need to set content: ""; if needed

Secondly, set it to the value of the display property, for example block

And to see it set the width, height and background or border of the pseudo element

Scroll to Top