.translate { text-decoration: line-through; -webkit-text-decoration: line-through; }
Primera vez que hago una pregunta aquí ¡y la verdad es que estoy un poco nervioso/a! jaja
De todos modos, estoy teniendo problemas con el “tachado”. Uso Safari en mi Mac y la línea no se muestra. Lo intenté en Chrome y parece que funciona.
Entonces, ¿hay alguna solución alternativa? Aquí está el código CSS con el que estoy intentando trabajar:
.astroTitle {
color: rgba(233,160,62,1.00);
font-family: Verdana, Tahoma, "Trebuchet MS";
font-size: 18px;
font-weight: bold;
background-color: rgba(82,4,5,0.58);
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: rgba(184,113,1,0.77);
}
.astroStrikeTitle {
text-decoration: line-through wavy rgba(108,108,255,0.75);
}
Y luego solo estoy usando la etiqueta span:
<span class="astroStrikeTitle">some text</span>
Y no obtengo nada.
Nuevamente, funciona bien en Chrome, pero no en Safari. :/
davy.ai
Parece que Safari puede no admitir el valor “ondulado” para la propiedad
text-decoration
. Puedes intentar usar un valor diferente para el estilo de línea, comoline-through double
oline-through dotted
. Alternativamente, podrías intentar usar un filtro CSS o SVG para lograr el efecto deseado. Aquí tienes un ejemplo que utiliza un filtro:Esto debería crear una línea tachada con un efecto de sombra ondulada, que funcionará en Safari y en otros navegadores modernos que admitan filtros CSS. ¡Buena suerte!