Estoy tratando de que la decoración del texto aparezca de izquierda a derecha, como si estuviera tachada con un bolígrafo.
¿Hay alguna manera de hacer esto sin hacer cambios en el texto detrás de él?
¡Gracias por adelantado!
document.querySelector('h1').addEventListener('click', (e) => { e.target.classList.toggle('strikethrough') }) .strikethrough { text-decoration: line-through; text-decoration-style: wavy; text-decoration-thickness: 15%; animation: strike 3s linear; } @keyframes strike { 0% {width: 0;} 100% {width: 100%;} } <h1>CROSS ME OUT</h1>Si está dispuesto a aceptar el uso de una línea recta como tachado (en lugar de depender de los estilos de tachado propios de la fuente), solo es cuestión de superponer un div encima del elemento <h1> y compensarlo al 100 % para el lado que usa transform: translateX(-100%) . Le damos un borde superior cuyo ancho depende del tamaño de la fuente (es decir, usamos unidades em ), y un color cuyo valor depende del color de la fuente actual (es decir, usamos currentColor ).
Puede utilizar las transiciones CSS para establecer la duración y la función de aceleración de la entrada de esta línea. Cuando se agrega la clase .strikethrough , el desplazamiento simplemente se establece en transform: translateX(0) .
Una advertencia es que este truco solo funciona para líneas que no se rompen. Si su elemento h1 se representa en varias líneas, entonces no funcionaría.
Vea el ejemplo de prueba de concepto a continuación:
document.querySelector('h1').addEventListener('click', (e) => { e.target.classList.toggle('strikethrough') }); h1 { display: inline-block; position: relative; overflow: hidden; } h1::after { position: absolute; top: calc(50% - 0.05em); left: 0; width: 100%; content: ''; display: block; border-top: 0.1em solid currentColor; transform: translateX(-100%); transition: transform .25s ease-in-out; } h1.strikethrough::after { transform: translateX(0); } <h1>CROSS ME OUT</h1>