Can I use a ::before or ::after pseudo-element on an input field?

Learn about the a ::before or ::after pseudo-element on an input field?
Submitted by Apurva Mathur, on May 24, 2022

Let's start the topic by seeing how ::after and ::before pseudo-element works?

A CSS pseudo-element is used to style specified parts of an element.

::before or ::after pseudo-element on an input field

The ::after – pseudo-element is used to insert some content after the content of the element, and the ::before – Vice versa of ::after, this is used to insert some content before the content of some element.

Example to use ::before or ::after pseudo-element on an input field

<!DOCTYPE html>
<html>
   <head>
      <style>
         p::after {
         content: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUDpNQ0urj59RGARw09kilDYGpt6cOYSoqMQ&usqp=CAU);
         }
         h3::before {
         content: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUDpNQ0urj59RGARw09kilDYGpt6cOYSoqMQ&usqp=CAU);
         }
      </style>
   </head>
   
   <body>
      <p>Image will be inserted after this paragraph tag</p>
      <h3>Image will be inserted before this heading tag</h3>
   </body>
</html>

Output

Example: Use a ::before or ::after pseudo-element

Explanation

Now coming to the main question, Can we use a ::before or ::after pseudo-element on an input field, so the answer to this question is no .Why? Because as the definition says that this pseudo selector will keep the content before or after the “content” of some other content, but initially input field is empty there is no content inside it so it won't work there.

CSS Examples »

Space between two rows in a table using CSS

CSS force image resize and keep aspect ratio