Does anyone know why my custom CSS styling for links does not show up on safari?

Question

I am using custom css for my squarespace site and the text decoration I set up shows up fine on Chrome but for some reason doesn't seem to be activated on safari? Code below

//HYPERLINK STYLING//
p a, h1 a, h2 a, h3 a, 
{
text-decoration: white dotted underline;
text-decoration-thickness:1px;
text-underline-offset: 0.25em;
}

a:hover 
{text-decoration: underline dotted;
}

body.site-title .logo a
{text-decoration: none;
}

I was hoping that this simple bit of text styling would work across all platforms.. but that does not seem to be the case.

Answer 1

Safari does not support a few attributes of text-decoration, so you need to have a prefix -web-kit- for them

//HYPERLINK STYLING//
p a, h1 a, h2 a, h3 a, 
{
  text-decoration: white dotted underline;
  -webkit-text-decoration: white dotted underline;
  text-decoration-thickness:1px;
  text-underline-offset: 0.25em;
}

a:hover 
{
  text-decoration: underline dotted;
  -webkit-text-decoration: underline dotted;
}

body.site-title .logo a
{
  text-decoration: none;
}