Chrome CSS: Adjacent Selector With Sibling Using Pseudo Element Doesn't Work

I'm using placeholders for a control that takes user input. If the placeholder is blank, it displays the placeholder. I'd like to have the each input is separated by a span. I'm

Solution 1:

You are probably looking for :placeholder-shown

input {
  width: 30px;
  border: none;
  color: red;
}

input::-webkit-input-placeholder {
  color: gray;
}
input:placeholder-shown+span {
  color: gray;
}

span {
  color: red;
  font-size:20px;
  padding:0 10px;
}

<input placeholder="TEST"><span>/</span><input style="padding-left:5px" placeholder="TEST">