Eu estava tentando gerar uma tela na qual utiliza o:before e:after pseudo-elementos, mas gostaria de saber se essa funcionalidade é realmente possível.

Eu tenho uma div wrapper que é envolvida em torno de uma entrada (permitindopseudo elements neste invólucro).

algo como:

+-----------------------------------+
| +-------------------------------+ |
| |                               | | <-- wrapper div
| +-------------------------------+ <-- input element
+-----------------------------------+

No entanto, eu estava procurando ter um pseudo-elemento posicionado após o div.

+-----------------------------------++-------+
| +-------------------------------+ | |¯¯¯|  |
| |                               | |    /   |
| +-------------------------------+ |   !    |<--pseudo element
+-----------------------------------++-------+

Eu queria poder passar o mouse sobre esse pseudo elemento e fazer com que o outro pseudo elemento aparecesse.

.wrap {
  position: relative;
  height: 30px;
  width: 200px;
  display: inline-block;
}
.wrap input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.wrap:after {
  content: "?";
  position: absolute;
  top: 0;
  left: 100%;
  height: 30px;
  width: 30px;
  font-size: 30px;
  text-align: center;
}
.wrap:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 60px;
  width: 100%;
  background: tomato;
  opacity:0.2;
}

<div class="wrap">
  <input placeholder="input element" type="text" />
</div>

A partir do design do snippet acima, existe uma maneira de fazer o:before elemento mudar sua opacidade quando eu passar o mouse apenas o:after elemento, e não owrap div em si (nota: o html não pode ser alterado, por que essa pergunta)?

Eu tentei usar algo como:

.wrap:not(input):hover:before{

depois de alterar a largura da entrada para90%, mas isso não fez diferença