Cannot get the :before element to appear on ReactiveForms input

Question

I am trying to display a FormControl on a form to hold a telephone country code prefix, and I want it to always display a plus sign in the left-padding area. My bet was to use a :before element on the input, but surprisingly I cannot get it to appear in the DevTools inspector. When I started to notice the problem I even went despearate and tried to place the :before element on all inputs - to no avail. On the other hand, styles for the main input element work as expected.

Same goes with :after.

So my question is - does placing a :before or :after element work for anyone? Is it a know "feature" of ReactiveForms or a bug?

css

input[name="telCountryCode"]:before {
  content: '+';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
}

ts

this.form = this.fb.group({
  telCountryCode: '',
  telNumber: '',
});

Answer 1

pseduo elements like :before/:after do not work on INPUT tag

Answer 2

:before/:after renders inside a container only

You can't use :before/:after or other pseudo-elements for input. Also img br hr etc.

It doesn't apply for self-closing elements.

Answer 3

wrap the input with div

<div class="telCountryCode-wrapper">
<input type="text"  name="telCountryCode">
</div>

and use this css

.telCountryCode-wrapper{
position:relative;
}
.telCountryCode-wrapper:before{
 content: '+';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
}

Answer 4

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered are within the container itself as a child element.

input can not contain other elements hence they're not supported.

Refer this Can I use the :after pseudo-element on an input field?