How Can I Use The Css Pseudo-element :before{ Content: '' } To Affect An Element?

If I have a list of optons, how can I use the CSS pseudo-element :before{ content: '' } to affect the ? Below there are three options an I'd like to insert text befor

Solution 1:

The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes.

It would be (roughly) the equivalent of doing:

<option><span>sandy - </span>beach</option>

If you want to update the text value, you will need to use JavaScript.

Solution 2:

In 2018, this does work in Chrome, Edge, Firefox, but only if the attribute size is specified with a value greater than 1. Safari lacks support.

select {
  width: 300px;
  cursor: pointer;
  
  font: 11pt Helvetica;
  
  outline: 0;
}

  select option {
    padding: 8px;
    
     font: 11pt Helvetica;
     
     vertical-align: middle;
  }

  select option::before {
      font-family: FontAwesome, sans-serif;
      font-size: 16px;
      content: attr(data-before);

      margin-right: 8px;
  }
 
div + div {
  margin-top: 20px;
}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"rel="stylesheet"/><div><selectsize="4"><optiondata-before="&#xf26e">500px</option><optiondata-before="&#xf042">Adjust</option><optiondata-before="&#xf170">Adn</option><optiondata-before="&#xf037">Align-center</option><optiondata-before="&#xf039">Align-justify</option><optiondata-before="&#xf036">Align-left</option><optiondata-before="&#xf038">Align-right</option></select></div><div><select><optiondata-before="&#xf26e">500px</option><optiondata-before="&#xf042">Adjust</option><optiondata-before="&#xf170">Adn</option><optiondata-before="&#xf037">Align-center</option><optiondata-before="&#xf039">Align-justify</option><optiondata-before="&#xf036">Align-left</option><optiondata-before="&#xf038">Align-right</option></select></div>

Solution 3:

It appears that for now, you can't. According to the W3, "This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML)". Some replaced elements are <img> tags, plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags).

You can however do this with JavaScript. Oh and BTW, content:, :before, and :after are actually CSS 2.1.

Solution 4:

Testing shows that the only browser which does indeed support generating content with :before (or ::before) on OPTION tags is Firefox. All the other big browser DO NOT accept it; this, as someone stated in the linked other question, is standard compliant, as they DO NOT explicitly state how generated content is to be managed in replaced elements such as OPTION.

On the other side, in my view the fact that, when generating content with option::before does work, it does not in any case affect the SELECT tag is correct and VERY USEFUL; the first example that comes to my mind is when you want to show options which are elements of a tree, and so you want to, as to increase UI clarity, indent them based on their level in the tree.

In that case, you surely want to do that ONLY when the option is shown in the opened drop down, while the indent would only be a nuisance if shown in the select when the drop down is closed.