title: CSS3 Icon: inserted content isn't placed consistently
body: <p>I'm creating icons using only CSS3. So far so good, but I've run into a problem with the simplest one.
  I just want to have an "!" centered in a circle, but its position isn't consistent. Sometimes it's a pixel higher, a pixel to the left, or both.
  I have no idea what's causing this.</p>
  
  <p><a href="https://jsfiddle.net/gfobyh3e/" rel="nofollow">Here's a fiddle.</a></p>
  
  <pre><code>.nos {
      position: relative;
      height: 12px; width: 12px;
      border: 2px solid #e04006;
      border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
      display: block;
      color: #e04006;
      overflow: hidden;
      cursor: default;
  }
  
  .nos:hover {
      overflow: visible;
  }
  
  .nos span {
      position: absolute;
      padding-left: 18px;
      display: block;
      font-size: 14px; line-height: 16px; text-decoration: underline;
      white-space: nowrap;
  }
  
  .nos:before {
      content: '\21';
      position: absolute; top: 0; bottom: 0; left: 0; right: 0;
      margin: 0;
      height: 16px; width: 16px;
      display: block;
      font-family: "Lucida Console", Monaco, monospace; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold; 
  }
  </code></pre>