html ul/li unordered lists with plus or minus icons via CSS

My main blog turned 20 today! Semi-related I published a list of highs and lows from my academic years. 

I wanted to display those as unordered lists but replacing the bullets with pluses or minuses. There's a CSS pseudoselector that works well for that, using the emoji for big plus/big minus:

.plusminus li.plus::marker {
    content: "➕";
}
.plusminus li.minus::marker {
    content: '➖';
}
.plusminus li.plusminus::marker {
    content: '➕➖';
}
.plusminus li.plusplus::marker {
    content: '➕➕';
}
.plusminus li.minusminus::marker {
    content: '➖➖';
}

I guess to do a proper job of it you should throw in an aria-label...

UPDATE: this does not work on Safari! It supports ::marker but not the content property I guess? So I switched back to this earlier idea:

ul.plusminus  {
    list-style:none;
    position: relative;
}
ul.plusminus li::before {
    position: absolute;
    left:0;
}
ul.plusminus li.plus::before {
    content: "➕";
}
ul.plusminus li.minus::before {
    content: '➖';
}
ul.plusminus li.plusminus::before {
    content: '➕➖';
}
ul.plusminus li.plusplus::before {
    content: '➕➕';
}
.plusminus li.minusminus::before {
    content: '➖➖';
}