变换效果在safari浏览器中不起作用？

Question

此代码在Mozilla和google chrome上运行完美。但是safari浏览器出现问题。在safari上输出不同。 我要用css或html添加什么代码。

HTML文件： -

<div class="grid-70 prefix-15 mobile-grid-100 tablet-grid-100">            
                <span class="cta-btn cl-effect-18"><a href="#contact-section" class="drop1 cl-effect-18">Recent Update</a></span>
                <span class="cta-btn cl-effect-18"><a href="#contact-section" class="drop1 cl-effect-18">Who We are</a></span>
</div>  

css文件： -

  .cl-effect-18 a::before, .cl-effect-18 a::after {
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      height: 2px;
      margin-top: -1px;
      background: #FFFFFF;
      content:'';
      z-index: -1;
      pointer-events: none;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s !important;
      -moz-transition: -moz-transform 0.3s, opacity 0.3s!important;
      transition: transform 0.3s, opacity 0.3s !important;
  }
  .cl-effect-18 a::before {
      -webkit-transform: translateY(-20px);
      -moz-transform: translateY(-20px);
      transform: translateY(-20px);
  }
  .cl-effect-18 a::after {
      -webkit-transform: translateY(20px);
      -moz-transform: translateY(20px);
      transform: translateY(20px);
  }
  .cl-effect-18 a:hover::before {
      transform: translateY(-30px) !important;
      -webkit-transform:translateY(-30px) !important;
      -webkit-transition:0.3s !important;
  }
  .cl-effect-18 a:hover::after {
      transform: translateY(30px) !important;
      -webkit-transform:translateY(30px) !important;
      -webkit-transition:0.3s !important;
  }

这是悬停效应。