title: Different alignment of ::after pseudo element in a flex-box in Safari
body: <p>While implementing a simple toggle control I encountered a problem that only seems to appear in Safari. The same code works fine in Firefox and Chrome.</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>.mgs.huge {
  font-size: 36pt;  
  }
  
  input.mgs.toggle {
  display: none;
  }
  
  label.mgs.toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  
  width: max-content;
  position: relative;
  
  --toggle-color: 49, 112, 212;
  }
  
  /* The toggle background. */
  label.mgs.toggle::before {
  display: inline-block;
  content: "";
  height: 12px;
  width: 23px;
  
  border: 1px solid rgba(var(--toggle-color), 1);
  background-color: rgba(var(--toggle-color), 0.75);
  border-radius: 25pt;
  margin-right: 4px;
  }
  
  label.mgs.toggle.huge::before {
  height: 35px;
  width: 69px;
  }
  
  /* The circle (handle) in the toggle - unchecked, standard size. */
  label.mgs.toggle::after {
  flex: 0 0 auto;
  align-self: center;
  content: "";
  
  position: absolute;
  width: 12px;
  height: 12px;
  left: 1px;
  
  background-color: white;
  border-radius: 50%;
  transition: left 0.2s;
  }
  
  label.mgs.toggle.huge::after {
  width: 35px;
  height: 35px;
  }
  
  input:checked.mgs.toggle.huge + label::after  {
  left: 35px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" class="mgs toggle huge" readonly="" id="toggle6" value=""&gt;
  &lt;label for="toggle6" class="mgs toggle huge"&gt;Huge&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In Safari the white knob doesn't align vertically. By specifying a top value you can align it manually (in this case by adding 11px top to <code>label.mgs.toggle.huge::after</code>), but unfortunately this shows another problem: Firefox doesn't use the same vertical offset as Chrome and Safari do: the circle is offset subtly by half a pixel or so.</p>
  
  <p>Hence I would prefer a solution where Safari does the automatic vertical centering, as it is supposed in this flex-box layout.</p>
  
  <p>Here's also a fiddle to play with: <a href="https://jsfiddle.net/3Ltkwaux/" rel="nofollow noreferrer">https://jsfiddle.net/3Ltkwaux/</a>.</p>