How to use :before or :after pseudo-element to an input field in CSS ?

Input tag (<input>) in HTML is used to take input from the user like text input, button input, file input, etc. 

In CSS, pseudo-elements are basically specific keywords that are added to a selector to style a specific part of the selected element. For example: ::before, ::after etc.

The pseudo-elements are supported by container elements, tags that can contain other tags inside them like div, p, etc. The pseudo-elements act as the first child and last child respectively of the main element. They are used for container-type elements. While the input tag is not a container-type element. It cannot contain other elements inside it. 

Note: We cannot use ::before and ::after with an input field.

Example 1: In this example, we have a <p> tag and a <input> tag and you can see that we have used the ::after pseudo-element with both of the tags and have applied the same style to each of them. But as you can see in the output image, the pseudo-element works with the <p> tag (which is a container element) while it does not work with the <input> tag.

Output:

👁 Image

Example 2: In this example, we have an input field that stores the password and a list of elements specifying the rules for making the password. By using ::before pseudo-element, we have added the ">" element to specify what is correct and "X" to specify what is incorrect.

We have also added the "correct" class to the input field when the user had entered the right password. But, the ::before only works with the <li> tags but not with the <input> tag.

Output:

👁 Image