How to add ::before element to the input

Question

Sorry, I'm new to web development. I'm trying to add before element for input in form but it doesn't work. Maybe someone knows why.

Answer 1

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>

Preview

Read More: This question: Can I use a :before or :after pseudo-element on an input field? shows more information.