title: Rotate pseudo element around its center?
body: <p>I created a simple tree menu.  The items that toggle use JQuery to show their children and toggle a class of "open".</p>
  
  <p>I have a ":before" plus sign on the item, and when open it rotates 135 degrees to an x, see animated gif:</p>
  
  <p><img src="https://i.stack.imgur.com/tTZSU.gif" alt="enter image description here"></p>
  
  <p>As you can see, it rotates "up". I want it to rotate around its center(which I thought was the default).  Here's my code:</p>
  
  <pre><code>.nav-header {
      color: gray;
      font-weight: bold;
      font-size: 16px;
      padding-top: 10px;
      cursor: pointer;
      &amp;:before {
          content: '+';
          font-size: 23px;
          display: inline-block;
          -webkit-transition: all .3s;
          -moz-transition: all .3s;
          -ms-transition: all .3s;
          -o-transition: all .3s;
          transition: all .3s;
      }
      &amp;.open {
          &amp;:before {
              -webkit-transform-origin: center center;
              -moz-transform-origin: center center;
              -ms-transform-origin: center center;
              -o-transform-origin: center center;
              transform-origin: center center;
              -webkit-transform: rotate(135deg);
              -moz-transform: rotate(135deg);
              -ms-transform: rotate(135deg);
              -o-transform: rotate(135deg);
              transform: rotate(135deg);
          }
  </code></pre>