title: Center a Pseudo Element
body: <p>First time really using the pseudo <code>:after</code> selector. Not sure if the problem I'm running into is a limitation of it or I'm just missing something obvious.</p>
  <p><strong><a href="http://jsfiddle.net/enigmarm/nq6TW/1/" rel="noreferrer">Here's my live code</a></strong>.</p>
  <pre><code>li.current:after {
      border-width: 1px 1px 0 0;
      content: ' ';
      background: #256f9e;
      display: block;
      height: 13px;
      position: absolute;
      width: 10px;
      top: 6;
      margin:0px auto;
      z-index: 99;
      transform: rotate(-224deg);
      -webkit-transform: rotate(-224deg);
      -moz-transform: rotate(-224deg);
      -ms-transform: rotate(-224deg);
      -o-transform: rotate(-224deg);
      transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      text-align: center;
      float: center;
  }
  </code></pre>
  <p>I've created a little triangle (Or rather a box that has been rotated to look like a triangle). I want it centered within the <code>&lt;li&gt;&lt;/li&gt;</code> but can't figure it out using my normal methods.
  The things that have failed (in no particular order):</p>
  <pre><code>text-align: center;
  float: center;
  margin: 0 auto;
  margin-right: 0;
  margin-left: 0;
  </code></pre>
  <p>What am I missing? I doubt it matters, but I'm using AngularJS. Thought I'd mention it in case there is a known conflict between Angular &amp; Pseudo selectors (which I doubt).
  Thanks.</p>