Imagenes usadas en seudolementos css ¿Es posible cambiar su tamaño?

publicado por: Anonymous

Muy buenas a todos. Respondiendo una pregunta de la comunidad se me vino otra duda, siempre que usó imágenes en pseudoelementos ::before y ::after las coloco como background porque siempre que las intento usar como contenido:

::before{
  content: url('imagen.jpg')
}

A estas imágenes nunca les he podido modificar las dimensiones (alto y ancho), aunque el contenedor seudo si los tenga definido: Ejemplo:

_x000D_

_x000D_

div{_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  background: cyan;_x000D_
  position: relative;_x000D_
  font-family: arial;_x000D_
}_x000D_
_x000D_
div::before{_x000D_
  content: url('http://lorempixel.com/120/120');_x000D_
  width: 50px;_x000D_
  height: 50px;_x000D_
  max-width: 50%;_x000D_
  display: block;_x000D_
  position: absolute;_x000D_
  top: 1em;_x000D_
  left: 50%;_x000D_
}

_x000D_

<div>_x000D_
  contenedor_x000D_
</div>

_x000D_

_x000D_

_x000D_

¿Es posible poder cambiar las dimensiones de esta imagen por css? Sí es un sí ¿Que estoy haciendo mal? y si no ¿Por qué, a qué se debe?

solución

En respuesta corta, no se puede!

Puedes dar estilo a la caja generada por el pseudo elemeno :before pero no a la imagen generada a travez de content

Hay discuciones acerca de este caso en esta web, pero no un conseso de momento:

http://lists.w3.org/Archives/Public/www-style/2011Nov/thread.html#msg451

Una manera de llevar a cabo lo que solicitas es utilizando transform: o zoom pero a este punto debes tener noción total del tamaño de la imagenes que estas insertando y del tamaño de la caja generada por :before

_x000D_

_x000D_

div{_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  background: cyan;_x000D_
  position: relative;_x000D_
  font-family: arial;_x000D_
}_x000D_
_x000D_
div::before{_x000D_
  content: url('http://lorempixel.com/100/100');_x000D_
  position: absolute;_x000D_
  top: 1em;_x000D_
  left: 50%;_x000D_
  width: 50px;_x000D_
  height: 50px;_x000D_
  transform: scale(0.5);_x000D_
}

_x000D_

<div>_x000D_
  contenedor_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *