Pseudo Element ::before doesn't work correctly

Question

I am trying to add a ::before to the inputs field, but it doesn't work. What is the problem?

input {
  display: block;
  margin: 20px auto;
  padding: 20px;
  width: 200px;
  background-color: #EEE;
  border: none;
  caret-color: red;
  position: relative;
}

input::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: linear-gradient(to right, #f34438 50%, #4caf50 50%, #4caf50 100%) 20 /  0 0 10px 0;
}

<input type="text" placeholder="One">
<input type="text" placeholder="Tow">
<input type="text" placeholder="Three">