Why is the pseudo class with column count not working in the Safari browser?
I have captured two screenshots to illustrate this issue.
1. Firefox browser screenshot
https://i.sstatic.net/27uoI.png
2. Safari browser screenshot
https://i.sstatic.net/vRNLv.png
Upon reviewing the screenshots, it is evident that the first one displays correctly with columns count while the second does not show the dots. Could there be an error in my code?
.columnBox {
width: 500px;
margin: auto;
}
ul {
list-style: none;
}
.column-count {
column-count: 2;
}
.accord-mobile-data li {
position: relative;
}
.accord-mobile-data li::before {
content: "";
color: #094CB2;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50px;
position: absolute;
background-color: #094CB2;
left: -15px;
top: 4px;
}<div class="columnBox">
<p>Without Column count</p>
<ul class="accord-mobile-data">
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
<li>Demo 5</li>
<li>Demo 6</li>
</ul>
<p>With Column count</p>
<ul class="column-count accord-mobile-data">
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
<li>Demo 5</li>
<li>Demo 6</li>
</ul>
</div>