Ich habe versucht, einen Bildschirm zu generieren, in dem das @ verwendet wir:before und:after Pseudo-Elemente, aber ich frage mich, ob eine solche Funktionalität tatsächlich möglich ist.

Ich habe ein Wrapper-Div, das um eine Eingabe gewickelt ist (unter Berücksichtigung vonpseudo elements auf diesem Wrapper).

etwas wie

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

Ich wollte jedoch ein Pseudoelement nach dem div positionieren.

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

Ich wollte in der Lage sein, dieses Pseudoelement zu schweben und das andere Pseudoelement erscheinen zu lassen.

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

Von dem obigen Snippet-Design gibt es eine Möglichkeit, das:before -Element ändert seine Deckkraft, wenn ich nur das @ schwe:after -Element und nicht daswrap div selbst (Anmerkung: HTML kann nicht geändert werden, daher diese Frage)?

Ich habe versucht mit etwas wie:

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

Nachdem Sie die Breite der Eingabe auf @ geändert hab90%, aber das hat keinen Unterschied gemacht