title: Safari behaving differently with border width :before and :after pseudo-elements
body: <p>I have implemented a :hover animation for a link that takes you to another part of the website. When hovered in Firefox or Google Chrome, the width of the border of the :before and :after pseudo-elements are 2px like specified but when checking Safari, I found the width to be thicker than what is expected.</p>
  <p>The HTML, CSS and screenshots of the occurrence are below.</p>
  <p>Firefox and Chrome:</p>
  <p><a href="https://i.stack.imgur.com/0hk7u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hk7u.png" alt="FF and Chrome" /></a></p>
  <p>Safari:</p>
  <p><a href="https://i.stack.imgur.com/cQR6E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cQR6E.png" alt="Safari" /></a></p>
  <p>Code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
      text-decoration: none;
      color: inherit;
  }
  #title {
      color: black;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  #gallery-link {
      padding: 15px 0;
      text-align: center;
  }
  #gallery-link-padding {
      padding: 15px 60px;
  }
  
  .frame-effect-click {
      position: relative;
      font-weight: 500;
      font-size: 16px;
      cursor: pointer;
  
      border-radius: 10px;
      transition: 0.4s;
  }
  .frame-effect-click:after, .frame-effect-click:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      transition: all 0.4s linear, opacity 0.1s 0.4s;
      opacity: 0;
  }
  .frame-effect-click:after {
      bottom: 0;
      right: 0;
      border-bottom: 2px solid black;
      border-right: 2px solid black;
  }
  .frame-effect-click:before {
      top: 0;
      left: 0;
      border-top: 2px solid black;
      border-left: 2px solid black;
  }
  .frame-effect-click:hover:after, .frame-effect-click:hover:before {
      width: calc(100% + 10px);
      height: calc(100% + 10px);
      transition: 0.4s, opacity 0.1s;
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="title"&gt;
    &lt;div id="gallery-link"&gt;
      &lt;a id="gallery-link-padding" class="frame-effect-click" href="#"&gt;View gallery&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Does anyone know why that is and how to fix this issue?</p>