How to Use a :Before or :After Pseudo-Element on an Input Field

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

:after and :before are not supported in Internet Explorer 7 and under, on any elements.

It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.

In other words it's impossible with pure CSS.

However if using jquery you can use

$(".mystyle").after("add your smiley here");

API docs on .after

To append your content with javascript. This will work across all browsers.

CSS content generation before or after 'input' elements

With :before and :after you specify which content should be inserted before (or after) the content inside of that element. input elements have no content.

E.g. if you write <input type="text">Test</input> (which is wrong) the browser will correct this and put the text after the input element.

The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.

See the examples in the specification:

For example, the following document fragment and style sheet:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).

How to add ::before element to the input

The element <input /> cannot have any contents. You cannot use ::before or ::after pseudo elements on this element. Consider wrapping it using <span> or <div> and give an display: inline-block style to them and use ::after or ::before.

div,
span {
  display: inline-block;
  position: relative;
  margin-right: 100px;
}

div:before,
span:before {
  position: absolute;
  right: -25px;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #f90;
  content: "";
  display: block;
}

<span><input /></span>
<div><input /></div>

h3 {  position: relative;  display: inline-flex;  flex-direction: column;  align-items: center;}
h3:before,h3:after {  content: "";  position: absolute;  top: 30px; /* adjust */  background: blue;  width: 30%; /* adjust */  height: 1px; /* adjust */}
h3:before {left: 0}h3:after {right: 0}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h3>About Us <i class="fa fa-comments-o"></i></h3>