6

Quería cambiar el texto de un botón al usar un hover y after, pero solo me lo agrega al lado.

.btn:hover {
  background-color: greenyellow;
  color: white;
}

.btn:hover::after {
  content: 'Hecho!';
}
<button class="btn">
    Pasa por encima
</button>

3 respuestas 3

6

No está demás decir que reemplazar directamente el texto como tal, no se puede con CSS, por eso se utilizan estrategias con :before y :after para emular este comportamiento.

Complementando la respuesta de Mateo, otra táctica es envolver el texto original del botón en un span, y ocultar (con display:none) tal texto al "hacer hover" en el botón.

Cabe mencionar que aquí se le agregó un width al botón para que se active el hover al posicionar el puntero del mouse en cualquier parte del botón, no solo al inicio de este.

.btn {
  width: 10em;
}

.btn:hover {
  background-color: greenyellow;
  color: white;
}

.btn:hover span {
  display: none;
}

.btn:hover::after {
  content: 'Hecho!';
}
<button class="btn">
    <span>Pasa por encima</span>
</button>

Artilugios hay varios...

4

before y after crean pseudo-elementos.

Al igual que todo elemento, cada uno tiene su propio contenido. Por lo tanto no te sirven como forma de modificar el contenido de otro elemento.

Lo que puedes hacer es poner el texto en before o after y modificarlo durante el evento hover.

.btn::after {
  content: 'Pasar por encima';
}

.btn:hover {
  background-color: greenyellow;
  color: white;
}

.btn:hover::after {
  content: 'Hecho!';
}
<button class="btn">
</button>

0

El problema que estás teniendo es que el pseudo-elemento ::after se está agregando después del contenido del botón, en lugar de dentro del botón.

Para que el texto "Hecho!" aparezca dentro del botón, puedes cambiar el display del botón a inline-block y agregar un position: relative al botón para que el pseudo-elemento se posicione correctamente en relación al botón.

1
  • No estaría demás que agregues un snippet (con el botón que indica <>) con lo que mencionás en tu respuesta. Lo que planteás también funciona.
    – padaleiana
    Commented el 24 abr. 2023 a las 13:04

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.