css strikethrough on Safari-CodePudding

First time asking question here, and actually kinda nervous! haha

Anyway, having issues with strikethrough. I use Safari on my Mac, and the line isn't displaying. Tried on Chrome, and it seems to work.

So, is there a workaround? Here's my css code I'm trying to work with

.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);
}

And then I'm just using span

<span >some text</span>

And I get nothing.

Again, it works fine on Chrome. Just not on Safari. :/

CodePudding user response：

You need to be more specific with your -webkit. Please try the following:

.astroStrikeTitle {
  text-decoration-line: line-through;
  -webkit-text-decoration-line: line-through;
  text-decoration-color: red;
  -webkit-text-decoration-color: red;
}
.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);
}

<span >some text</span>

CodePudding user response：

here is the answer to your question: https://stackoverflow.com/a/51254417/4527878

also always check mdn docs for support here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

for specific to your question :

.astroStrikeTitle {
  text-decoration: line-through wavy;
  -webkit-text-decoration-line: line-through wavy;
  color: rgba(108,108,255,0.75);
}