css strikethrough on Safari

Question

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 class="astroStrikeTitle">some text</span>

And I get nothing.

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

I just tried using -webkit as someone had suggested on another question stating it worked for them, and still get nothing. ‍♂️ — kcjonez, Dec 21 '21 at 12:52

score 0 · Answer 1 · answered Dec 21 '21 at 13:13

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 class="astroStrikeTitle">some text</span>

score 0 · Answer 2 · answered Dec 21 '21 at 13:17

0

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

answered Dec 21 '21 at 13:17

Murtaza Hussain

3,851
24
30

Thanks! It still doesn't work, but I appreciate the help. Also, I tried looking it up, and must have worded it wrong, cause I got nothing about this specific issue. Then you post that link and I feel sthtoopid! lol – kcjonez Jan 04 '22 at 22:51

css strikethrough on Safari

2 Answers2