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 element
s 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