title: Absolute position relative to inline element
body: <p>I'm trying to center a line of text in a div and place an SVG after the centered text, but I don't want the width of the SVG to be considered for centering purposes.<br>
  The simplest way to achieve this is to add an invisible SVG before the text, but this requires unnecessary duplication of the SVG.<br>
  It seems like I should be able to achieve this with absolute positioning, but the default position is ever so slightly off and setting top/bottom/left/right positions it relative to the body, not the text.</p>
  
  <p>How can I achieve the positioning in the green example below without needing multiple SVG elements on the page?</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>.parent {
    width: 150px;
    border: solid;
    text-align: center;
  }
  .correct {
    background: rgb(183, 225, 205);
  }
  .incorrect {
    background: rgb(244, 199, 195);
  }
  svg {
    height: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;span&gt;Centered&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="parent incorrect"&gt;
  &lt;span&gt;Centered&lt;/span&gt;
  &lt;svg viewBox="0 0 2 2"&gt;
  &lt;path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div class="parent correct"&gt;
  &lt;svg viewBox="0 0 2 2" style="visibility: hidden"&gt;
  &lt;path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  &lt;span&gt;Centered&lt;/span&gt;
  &lt;svg viewBox="0 0 2 2"&gt;
  &lt;path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div class="parent incorrect"&gt;
  &lt;span&gt;Centered&lt;/span&gt;
  &lt;svg viewBox="0 0 2 2" style="position: absolute"&gt;
  &lt;path d="M0.43 1.77L1.2 1 0.43 0.24 0.67 0l1 1-1 1z"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>