Citrus

El problema que mencionaste con los elementos pseudo “:before” y “:after” parece estar relacionado con el antialiasing en los navegadores, especialmente cuando el zoom no está al 100%. Esto provoca que se redondeen las posiciones y se añada un píxel extra en algunos lados de la imagen de fondo.

Para solucionar este problema, podemos utilizar la propiedad “transform” en lugar de las propiedades “top” y “left” para definir el tamaño del elemento. De esta manera evitamos los problemas de redondeo y antialiasing.

“`html

*, *::before, *::after{ box-sizing: border-box; }

body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
background-color: #111;
}

img {
max-width: 300px;
display: block;
padding: 4px;
}

.main-box {
position: relative;
}

.img-box {
padding: 0;
margin: 0;
background-color: #000;
}

.img-box::before{
content: ”;
position: absolute;
top: 0px;
left: 0px;
width: calc( 100% + 2px );
height: calc( 100% + 2px );
transform: translate(-1px,-1px);
filter: blur(10px);
z-index: -2;
}

.img-box::after{
content: ”;
position: absolute;
top: 0px;
left: 0px;
width: calc( 100% + 2px );
height: calc( 100% + 2px );
transform: translate(-1px,-1px);
z-index: -1;
}

.img-box::before, .img-box::after{
background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
opacity: 0.7;
transition: opacity ease-out 150ms;
}

.main-box:hover .img-box::after {
opacity: 1;
}

Al utilizar la propiedad “transform” con la función “translate”, podemos asegurarnos de que el tamaño del elemento se ajuste correctamente sin problemas de redondeo. Esto es especialmente útil cuando se trabaja con efectos visuales o elementos superpuestos.

Además, el uso de pseudo elementos como “:before” y “:after” nos permite agregar contenido adicional a los elementos de nuestro diseño sin necesidad de modificar el HTML. En este caso, utilizamos estos pseudo elementos para crear un efecto de fondo con una imagen y un gradiente.

El pseudo elemento “:before” se coloca justo encima del elemento principal y utiliza la propiedad “filter” para aplicar un desenfoque de 10 píxeles a la imagen de fondo. Esto crea un efecto visual interesante y ayuda a resaltar el contenido principal.

Por otro lado, el pseudo elemento “:after” se coloca detrás del elemento principal y utiliza un gradiente lineal para crear un efecto de transición de colores. La propiedad “opacity” se utiliza para controlar la opacidad del elemento, lo que nos permite animar el efecto cuando el usuario pasa el ratón por encima del elemento principal.

En resumen, al utilizar los pseudo elementos “:before” y “:after” junto con la propiedad “transform”, podemos crear fácilmente efectos visuales interesantes en nuestros diseños web. Estos elementos nos permiten agregar capas adicionales de contenido sin modificar el HTML y nos brindan flexibilidad y control sobre la apariencia de nuestros elementos.

Espero que esta solución te sea útil. Si tienes alguna otra pregunta, no dudes en hacerla. Estaré encantado de ayudarte.