-1

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

what I have: enter image description here

my code :

jsfiddle down here

https://jsfiddle.net/ecfobu3g/

If I remove display: inline-block; the :before element would transition from the left of the page, But I want it from the left of the .title main element.

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.

Katallone
  • 315
  • 2
  • 7
  • 15

2 Answers2

1

Add a div around and text-align: center;

Like this 

<div style="text-align : center; ">
  <h1 data-title='TiPS' class='title'>TiPS</h1>
</div>
Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • It's not working... It's the same as if I'd remove the **display:inline-block** – Katallone Apr 02 '16 at 17:52
  • No it isn't ... Did you check the JSFiddle I've provide ? With that way, you keep the animation the same instead of removing display: inline-block which change the animation – Vincent G Apr 02 '16 at 17:57
  • Oh my bad. It works, I just forgot to uncomment the **display:inline-block**.. Thanks. One last question. why did you put **width:100%**? – Katallone Apr 02 '16 at 18:02
  • No problem, you're welcome ! it's because I went too fast. It is not required to make it works because a div element is a block element so it already occupy 100% of the document size. – Vincent G Apr 02 '16 at 18:07
0

You can add

width: 100%;

to your h1 element. I'm not entirely sure if that's what you wanted.

mareoraft
  • 3,474
  • 4
  • 26
  • 62
  • 1
    It would be better to remove `display: inline-block`, which produces a shrink-to-fit width. – Oriol Apr 02 '16 at 17:45