Я пытался создать экран, в котором используется:before а также:after псевдоэлементы, но мне интересно, возможна ли такая функциональность на самом деле.

У меня есть div-обертка, которая обернута вокруг ввода (с учетомpseudo elementна этой обертке).

что-то вроде:

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

Тем не менее, я искал псевдоэлемент, расположенный после div.

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

Я хотел иметь возможность навести этот псевдоэлемент, и чтобы появился другой псевдоэлемент.

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

Из приведенного выше дизайна фрагмента, есть ли способ сделать:before элемент меняет свою непрозрачность, когда я парю только:after элемент, а неwrap сам div (примечание: html нельзя изменить, поэтому, почему этот вопрос)?

Я пытался использовать что-то вроде:

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

после изменения ширины входа на90%, но это не имело значения