unordered list bullets don't work on safari

Question

I have a simple unordered list with a custom bullet (>> instead of a Disc Bullets). It is working on Firefox, but not on safari. On Safari my bullets becomes simpleDisc Bullets. I can't figure out why that is the case... What did I do wrong ?

  ul {           
    list-style-type: '>>';
    padding-left: 0;
    list-style-position: inside;
  }
  
  li {
    padding-left: 0.5em;
  } 

Answer 1

What version Safari are you using? It looks like list-style-type: <string> is not supported for Safari 3.1 to 14.

Answer 2

Neither do pseudo-elementally inserted bullet points or similar markers work on Safari.

https://codepen.io/tamjk/pen/MWQYRMr?editors=1100

HTML

<div class="homeblurb-cont">
    <div class="homeblurb">
        <h2 class="welcome">We Do Washing Fast !</h2>
        <ul class="bullets">
            <li class="red-alert">Open Through Covid Crisis</li>
            <li>2-Hour Express Laundry Service</li>
            <li>24-Hour Dry-Cleaning</li>
            <li>€4 Shirt Service: Wash/Dry-Clean</li>
            <li>Bedding & Coverings Service</li>
            <li>Duvet (Synth/Feather) Service</li>
            <li>Leather & Suede Cleaning</li>
            <li>Hospital/Care Home Service</li>
            <li><span class="quality">Quality</span> Service Assured</li>
        </ul>
    </div>  
</div>

CSS

.homeblurb-cont {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    align-content: center;
    width: auto;
    margin: 30px auto;
    background-color: rgba(240, 221, 179, 1.0);
}

@media screen and (min-width: 750px) {

    .homeblurb-cont {
        width: 25%;
        min-width: 250px;
        justify-content: center;
    }
}

.homeblurb {
    
}

.welcome {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 1.4rem;
}

@media screen and (min-width: 200px) {

    .welcome {
        font-size: clamp(1.6rem, 8vw, 2.6rem);
    }
}

@media screen and (min-width: 400px) {

    .welcome {
        font-size: 2.6rem;
    }
}

@media screen and (min-width: 750px) {

    .welcome {
        margin-top: 0;
        margin-bottom: 2em;
    }
}

.bullets {
    margin: 0 auto;
    text-align: left;
    list-style-type: none;
    width: auto;
}

.bullets li {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
    line-height: 2.5;
    padding-left: 1em;
    width: auto;
}

@media screen and (min-width: 400px) {

    .bullets li {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 750px) {

    .bullets {
        margin-right: 0px;
    }
}


.bullets li:not(.red-alert)::marker {
    content: "\25CF";
    font-size: 5vw;
}

@media screen and (min-width: 250px) {

    .bullets li:not(.red-alert)::marker {
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 400px) {
    
    .bullets li:not(.red-alert)::marker {
        margin-right: 25px;
        font-size: 1.5rem;
    }
}

.red-alert {
    color: red;
    font-weight: 700;
}

@keyframes heartpulse {
  from { color: var(--magnolia); }
  to   { color: red; }
}

.bullets li.red-alert::marker {
    content: "\2665";
    margin-right: 5px;
    font-size: 5vw;
    animation-name: heartpulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;  
}

@media screen and (min-width: 250px) {

    .bullets li.red-alert::marker {
        margin-right: 15px;
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 400px) {

    .bullets li.red-alert::marker {
        margin-right: 20px;
        font-size: 1.8rem;
    }
}