1

tengo un div al que le asigno una imagen mediante :after (la cual cambiará con un evento) el problema es que no me toma el tamaño que deseo asignarle... Tiene que entrar en el cuadrado negro. Es la primera vez que uso :after con imagenes, con textos no me había pasado... paso código para que vean si me pueden orientar

nav {
  display: inline-block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: auto;
  text-align: right;
  z-index: 100;
  top: 50px;
}

nav div#cerrar:after {
  content: url('https://png.pngtree.com/png-vector/20190124/ourlarge/pngtree-x-red-cross-png-picture-red-png-image_550969.jpg');
  position: absolute;
  bottom: 0px;
  right: 100px;
  width: 20px;
  height: 20px;
}

nav a {
  text-decoration: none;
  color: #000;
  padding: 10px 10px 10px 0;
  display: block;
}

nav #cerrar {
  position: absolute;
  background: #000;
  width: 40px;
  height: 50px;
  right: 100px;
  bottom: -40px;
  border-radius: 0 0 5px 5px;
}
<nav>
  <a href="#contacto">CONTACTANOS</a>
  <div id="cerrar" class=""></div>
</nav>

1 respuesta 1

4

Tal y como lo estás haciendo no podrías, pero existe un apaño usando la imagen como background para poder hacerlo.

nav {
  display: inline-block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: auto;
  text-align: right;
  z-index: 100;
  top: 50px;
}

nav div#cerrar:after {
  background-image: url('https://png.pngtree.com/png-vector/20190124/ourlarge/pngtree-x-red-cross-png-picture-red-png-image_550969.jpg');
  background-size: 40px 50px;
  display: inline-block;
  width: 40px; 
  height: 50px;
  content:"";
}

nav a {
  text-decoration: none;
  color: #000;
  padding: 10px 10px 10px 0;
  display: block;
}

nav #cerrar {
  position: absolute;
  background: #000;
  width: 40px;
  height: 50px;
  right: 100px;
  bottom: -40px;
  border-radius: 0 0 5px 5px;
}
<nav>
  <a href="#contacto">CONTACTANOS</a>
  <div id="cerrar" class=""></div>
</nav>

1
  • perfecto! mil gracias, me estaba quemando la cabeza, jajaja
    – Fernanda
    el 3 oct. 2019 a las 17:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.