:after not positioning correctly in Safari

March 25, 2024

I’ve added a graphic arrow after "Register" in the nav bar. It’s displaying correctly in Chrome, but in Safari it’s in the bottom right of the browser window.

Anyone have some insight? I feel like I’ve tried everything…

Website: https://rtrx.co/

.nav-register {
  margin-right: 9px;
}
.nav-register:after {
  content: "";
  background: url("https://rtrx.wpenginepowered.com/wp-content/uploads/2024/01/button-arrow-black.svg") no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.2222222222222223rem;
  width: 1.2222222222222223rem;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

>Solution :

I think you will find that if you modify it to use position: relative and position: absolute you will get better results

playing around with your linked website, this spacing appears to give the expected result.

.nav-register {
  margin-right: 9px;
  position: relative;
}
.nav-register:after {
  content: "";
  background: url("https://rtrx.wpenginepowered.com/wp-content/uploads/2024/01/button-arrow-black.svg") no-repeat;
  background-size: contain;
  height: 1.2222222222222223rem;
  width: 1.2222222222222223rem;
  position: absolute;
  bottom: 22px;
  right: -20px;
}

As a note to this, there is really no reason you need this to be added
via CSS as it’s just adding an image to a button. Seems like it might
make more sense to just add the image to the html. Feels like using a
hammer with screws to me.