CSS。クラスを中心にすることはできません。それは '：before'要素です。

Question

私は：beforeと：afterの疑似要素を学んでいますが、なぜそれがセンタリングしていないのか分かりません。

私が持っているもの：

私のコード：

jsfiddle down here 

https://jsfiddle.net/ecfobu3g/

私は表示を削除する場合：インラインブロック;：before要素はページの左から遷移しますが、私は.titleメイン要素の左からそれを必要とします。

要するに、私はトランジションと同じ効果を得たいと思っていますが、テキストを水平にセンタリングします。

私は、.titleクラスを水平にセンタリングし、.title：beforeもまた水平にセンタリングすることを望みます。

Answer 1

divを前後に追加し、text-align：center;

Like this

<div style="text-align : center; "> 
    <h1 data-title='TiPS' class='title'>TiPS</h1> 
</div> 

Answer 2

あなたのH1要素に

width: 100%; 

を追加することができます。私はそれがあなたが望んでいたかどうかは完全にはわかりません。