Rotate pseudo element around its center?

I created a simple tree menu. The items that toggle use JQuery to show their children and toggle a class of "open". I have a ":before" plus sign on the item, and when open it rotates 135 degrees to an x, see animated gif: 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: ``` .nav-header { color: gray; font-weight: bold; font-size: 16px; padding-top: 10px; cursor: pointer; &: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; } &.open { &: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); } ```