I've created a basic unordered list using Bootstrap 4:
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
<li>line 5</li>
</ul>
and I've applied some custom CSS to style it:
ul, ol {
padding-left: 1rem;
}
li {
margin-bottom: 1rem;
}
However, the list appears differently in Firefox and Safari.
Firefox https://i.sstatic.net/JLCEi.png
Safari https://i.sstatic.net/Qm70b.png
After some investigation, I discovered that Bootstrap uses the ::marker pseudo element instead of ::before. Is there a way to modify this so that it displays more consistently across different browsers like Safari?