es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Ajustando el elemento de escala mientras se mantiene un pseudo-elemento adjunto en su lugar y sin escalar.

Ajustando el elemento de escala mientras se mantiene un pseudo-elemento adjunto en su lugar y sin escalar.

30 May, 2023 Programación

En el siguiente código, el contenido dentro del elemento debería aumentar de tamaño al pasar el mouse por encima (escalado verticalmente alineado verticalmente), pero el seudoelemento de posición absoluta adjunto (*) debería mantenerse exactamente en el mismo lugar sin ningún escalado. En mi código, lamentablemente el símbolo * se está escalando y alterando su posición.

Nota: Si bien no puedo cambiar el marcado de HTML, tengo libertad para definir el CSS.

1
2
3
4
5
 
table {
  margin: 3rem;
}

td {
  position: relative;
}

span {
  display: inline-block;
}

td div span::before {
  position: absolute;
  content: ''*'';
  top: -1rem;
  left: -4rem;
  right: -4rem;
  text-align: center;
  font-size: 80%;
}

div {
  padding: 1rem;
  background: lightgreen;
}

div:hover span {
  transform: scale(2.6);
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el efecto deseado, podemos agregar la propiedad transform-origin al selector div:hover span y establecerla en top. Esto asegurará que la escala ocurra desde la parte superior del centro del elemento span, manteniendo efectivamente la posición del pseudo-elemento sin cambios. El código CSS actualizado se vería así:

    table {
  margin: 3rem;
}

td {
  position: relative;
}

span {
  display: inline-block;
}

td div span::before {
  position: absolute;
  content: '*';
  top: -1rem;
  left: -4rem;
  right: -4rem;
  text-align: center;
  font-size: 80%;
}

div {
  padding: 1rem;
  background: lightgreen;
}

div:hover span {
  transform: scale(2.6);
  transform-origin: top;
}

Comments are closed.