I have css module like this below.
My JSX is
<code><select className={className=${styles.selectBase}}>
.....
</select>
</code>
<code><select className={className=${styles.selectBase}}>
.....
</select>
</code>
<select className={className=${styles.selectBase}}>
.....
</select>
and css module ,
<code>.selectBase {
border: 1px solid;
border-radius:4px;
background-color:#ffffff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:relative
}
.selectBase::after{
position: absolute;
content:'▼';
top: 28%;
right: 4%;
color: #111;
pointer-events: none;
}
</code>
<code>.selectBase {
border: 1px solid;
border-radius:4px;
background-color:#ffffff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:relative
}
.selectBase::after{
position: absolute;
content:'▼';
top: 28%;
right: 4%;
color: #111;
pointer-events: none;
}
</code>
.selectBase {
border: 1px solid;
border-radius:4px;
background-color:#ffffff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:relative
}
.selectBase::after{
position: absolute;
content:'▼';
top: 28%;
right: 4%;
color: #111;
pointer-events: none;
}
css .selectBase works but ::after doesn’t look work,
I have to do something special for after in css module?
WHere should I fix ?