How to force one element to display the same in browsers?

Question

css

There is a picture that in chrome and opera is where it should be, but in ie and firefox it is crooked.
Chrome

Firefox

IE 11

How to put it back?
I made a purple block from a div and a inside this div
Here is the css code for it

.refresh
    background #8c6ff3
    box-shadow: none
    height 100px
    text-indent 100%
    white-space nowrap
    overflow hidden
    cursor pointer
    font-size 0
    transition: background-color 1s;
    a.button:after
      background url('/img/arrow.png') no-repeat center
      display block
      width 36px
      height 42px
      position relative
      margin 25px 0px 0px -25px
      z-index 2
      top 50%
      left 50%
      content ''

Answer 1

Without the source code, I won't get lost... But maybe it's worth formatting the code according to the appropriate syntax?

.refresh{
    background: #8c6ff3;
    box-shadow: none;
    height: 100px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-size: 0;
    transition: background-color 1s;
}
    a.button::after{
      background: url('/img/arrow.png') no-repeat center;
      display: block;
      width: 36px;
      height :42px;
      position: relative;
      margin :25px 0px 0px -25px;
      z-index: 2;
      top :50%;
      left :50%;
      content: '';
}