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

Last Updated : 27 Mar, 2023

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Using :after pseudo-element 
        on an input field 
    </title> 
  
    <style> 
        p::after, 
        input::after { 
            content: "My after element"; 
            border: 2px solid red; 
            padding: 2px; 
            margin-left: 10px; 
        } 
    </style> 
</head> 
  
<body style="font-family:sans-serif"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Can I use :after pseudo-element 
        on an input field? 
    </h3> 
      
    <p>This is a container element</p> 
      
    <input type="text" placeholder="Enter your email"> 
</body> 
  
</html> 

Output:

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>  
        Using a :before pseudo-element 
        on an input field 
    </title> 
      
    <style> 
        ul { 
            list-style: none; 
        } 
  
        .correct::before { 
            content: "> "; 
            color: green; 
        } 
  
        .incorrect::before { 
            content: "X "; 
            color: red; 
        } 
    </style> 
</head> 
  
<body style="font-family:sans-serif"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Use :before pseudo-element  
        on an input field 
    </h3> 
      
    <input class="correct" type="text" 
        placeholder="Enter your password"> 
  
    <ul> 
        <li class="correct"> 
            Min 6 characters 
        </li> 
        <li class="correct"> 
            Must have atleast 1 number 
        </li> 
        <li class="correct"> 
            Must have atleast 1 special symbol 
        </li> 
        <li class="incorrect"> 
            Must not contain your name  
            or parts of your email 
        </li> 
    </ul> 
</body> 
  
</html> 