CSS. Can't center class and it's ':before' element [duplicate]

This question already has an answer here:

• Horizontally center a div in a div 46 answers

I'm learning the :before and :after pseudo-elements but I don't understand why it's not centering.

what I have:

my code :

jsfiddle down here

http://ift.tt/237NBK5

In short I want to achieve the same effect of transition but I want the text to be centered horizontally.

I want the .title class to be centered horizontally and the .title:before also to be centered horizontally.