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.

.translate { text-decoration: line-through; -webkit-text-decoration: line-through; }

26 Jul, 2023 Programación

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. :/

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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, como line-through double o line-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:

    .astroStrikeTitle {
  text-decoration: line-through;
  filter: drop-shadow(0 0 2px rgba(108,108,255,0.75));
}

    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!

Comments are closed.