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.

::after – This pseudo-element is used to insert some content after the content of the element.

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

Example:

<!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

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 Tutorial & Examples »

Space between two rows in a table using CSS

CSS force image resize and keep aspect ratio

Preparation

Aptitude Questions MCQs Find Output Programs

What's New

Top Interview Coding Problems/Challenges!

Comments and Discussions!