Is it possible to insert an asterisk * after 'required' inputs in a form using the ::after psuedo element selector?

Here's what i thought the code should have looked like; <!DOCTYPE html> <html> <head> <style> input::after { content: "*"; } </style> </head> <body> <form action="#"> Required input <input type="text" required></input> <br><input type="submit"></input> </form> </body> </html> but that doesn't work. I ended up adding a star using this <input type="text" required> * </input> but still wondering if i could have used "::after" incase of multiple required inputs.

html css selectors

13th Apr 2020, 1:31 PM

Taofeeq Hamzat

3 Answers

+ 2

It could also be done with :after pseudo-element, but it must be applied to a wrapper of the input element: <style> form .required:after { content:'*'; color:red; } </style> <form> <div class="required"> <label>username:</label><br> <input type="text" required> </div> <div class="optional"> <label>email:</label><br> <input type="text"> </div> <div class="required"> <label>password:</label><br> <input type="password" required> </div> </form>

13th Apr 2020, 10:09 PM

visph

+ 2

No, it should be <p> <span> Username<span class="red">*</span>: </span> <input name="username" required> </p> <p> <span> Password<span class="red">*</span>: </span> <input name="password" type="password" required> </p> <style> .red{color:red;}

13th Apr 2020, 1:55 PM

Gordon