Kevin Powell - Community•14mo ago

Pseudo element not showing up

So I'm trying to make a currency input and I want it to have a dollar sign ($) floating inside of the input but not part of the actual value of the input (decoration if you will). im trying to do this with pseudo elements (first time using them). I have an input called #cost with the code below, nothing shows up.

#cost::before {
    background-color: red;
    width: 1rem;
    height: 1rem;
    content: '$';
}

#cost::before {
    background-color: red;
    width: 1rem;
    height: 1rem;
    content: '$';
}

3 Replies

Gmoney_123•14mo ago

heres the html if that helps:

<label for="cost">Cost</label>
    <input class="form-input" type="text" id="cost" onfocus="this.select();" placeholder="">

<label for="cost">Cost</label>
    <input class="form-input" type="text" id="cost" onfocus="this.select();" placeholder="">

thanks in advance!

Chris Bolson•14mo ago

inputs can't have pseudo elements. or rather, they can't have ::before or ::after psuedo elements You will need to wrap the input in an element and apply the pseudo element to that.

Gmoney_123•14mo ago

thank you!

Gaming

Programming

Pseudo element not showing up