Pseudo element not showing in react - html

Question

.input-select{
position: relative;
height: 100%;
}
.input-select::before{
content: '';
position: absolute;
display: inline-block;
height: 50px;
width: 50px;
background-color: red;
z-index: 100;
}
<div className="input-group">
<label htmlFor="type">GST Type: </label>
<select name="type" id="type" className="input-select">
<option>Registered</option>
<option>Unregistered</option>
</select>
</div>
I have tried setting body and html height to 100% as well as setting .input-select height to 100%.
I have have tried setting display to block or inline block and setting z-index to a high value.
However so far I have not been able to make it work.

Answer 1

On select, we can't have pseudo selectors. You have to make one wrapper div and then on that div, you can give after, before.
<div class="input-select">
<select>
<option>United Kingdom</option>
<option>Canada</option>
<option>United States</option>
</select>
</div>
.input-select::before{
content: '';
position: absolute;
display: inline-block;
height: 50px;
width: 50px;
background-color: red;
z-index: 100;
}

Answer 2

You can not put a pseudo element in an input element,however you can put a hover pseudo element. Elements starting and closing in a single place like is not a container element.You can use hover here but not ::before and ::after
.input-select{
position: relative;
height: 100%;
}
.input-select:hover{
content: '';
position: absolute;
display: inline-block;
height: 50px;
width: 50px;
background-color: red;
z-index: 100;
}

Answer 3

Pseudo-elements are only allowed to be used on container elements. Elements like inputs, select, images, and any other self-closing element can’t use pseudo-elements because they aren’t “container elements.

Answer 4

The select box can't have a pseudo-selector. So, add one parent div and then use those selectors. Also add top/bottom/left/right positions in CSS.

Answer 5

This might help with troubleshooting-- I was having this problem and found that since I was calling the CSS in a module.css file (which adds extra characters to the class name when the page loads), the ::after pseudo element code wasn't being picked up, even though normal classes and ids were. When I moved just the pseudo element class to a normal / sitewide CSS file, it worked.