Css Webkit变换悬停时旋转伪不在safari中工作

我有一个列表项，每个列表项都设置了一个伪边框，我的悬停效果在google chrome中工作，但在safari中失败，它们都使用相同的渲染引擎，为什么它不工作

.page-content ol li:before {
      background: #338ec9;
      background: url(../images/tie.png) no-repeat 0;
      margin-bottom: 1em;
      padding-left: 35px;
      font-size: 1.2em;

  position: absolute;    
  left: 0;
  top: -2px;

  height: 25px;
  width: 17px;
  line-height: 25px;

  font-size: 12px;
  text-align: center;

  border-radius: 2em;
  color: transparent;
  transition: 0.6s;     
}

.page-content ol li:hover:before {        
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

加

到

它应该做到以下几点：

---

我已经读到，在li上设置显示块应该可以解决这个问题，但这没有什么区别。通常，伪元素需要显示内容

-webkit-transition:0.6s;

.page-content ol li:before