ADVERTISEMENT
ADVERTISEMENT

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 »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.