1

I am trying to use the :after CSS pseudo-element on an input field, but it does not working. i tried below code please suggest me how can i use this pseudo-element

input[type=text]:after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
}

Search: <input type="text" name="search">

https://www.w3schools.com/code/tryit.asp?filename=FZ9FJ29FSTVU

Krish
  • 4,166
  • 11
  • 58
  • 110
  • Dhaval Marthak i want to archive this using angular – Krish Jan 16 '19 at 06:53
  • 1
    Whether you use angular or C# or any other web languages, HTML is same for everything. You use forms and this is (input) form element and according to link i've provided you can not apply pseudo selector `::after` to input elements! – Dhaval Marthak Jan 16 '19 at 07:09

1 Answers1

-1

Update
The css ::after and ::before selector render inside a container and input tag cannot contain any child. Hence, both the selector won't work with input tag or any other tag that does not support child nodes

So, you cannot achieve it using plain CSS. Please refer to this link on stackoverflow

You are using wrong css after selector.

This should work

input[type=text]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
}
Pankaj Prakash
  • 2,300
  • 30
  • 31