Pseudo class with column count not working in the safari browser

Question

Pseudo class with column count not working in the safari browser.

I have two screenshots.

1. Firefox browser screenshot

2. Sarari browser screenshot

You can check in the screenshot, The first one screenshot is working in with columns count but in the second screenshot, it's not displaying the dots. Is there any issue with 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>

Answer 1

Your code works fine, I checked it in firefox and chrome. In this case the problem is with safari, this browser does not support the ::before and ::after pseudo-elements. You can check this out here: ::before | ::afrer. Sometimes we just can't have it all ;-)