Al pasar el cursor sobre un pseudo elemento, ¿aparece el otro pseudo elemento?

Estaba tratando de generar una pantalla en la que se utiliza el:before y:after pseudo elementos, pero me pregunto si tal funcionalidad es realmente posible.

Tengo una envoltura div que se envuelve alrededor de una entrada (lo que permitepseudo elements en esta envoltura).

algo como:

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

Sin embargo, estaba buscando tener un pseudo elemento posicionado después del div.

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

Quería poder desplazar este pseudo elemento y hacer que aparezca el otro pseudo elemento.

.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>

Del diseño del fragmento anterior, ¿hay alguna forma de hacer que el:before el elemento cambia su opacidad cuando paso el mouse solo por:after elemento, y no elwrap div en sí (nota: html no se puede cambiar, ¿por qué esta pregunta?)

Intenté usar algo como:

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

después de cambiar el ancho de la entrada a90%, pero esto no hizo la diferencia

Respuestas a la pregunta(2)

Su respuesta a la pregunta