How to center absolute position heading without wrapping + using pseudo class :before

Question

i have following H2 element "základní operace"

I use pseudo class ::before for creating underline.

 h2 { position: absolute; font-size: 3rem; text-align: center; font-size: var(--fs-xl); transform: translateX(-50%); left: 50%; } h2:before { content: ""; position: absolute; width: 80%; height: 1px; bottom: 0px; left: 10%; border-bottom: 3px solid #007bff; }

 <h2> Zakladni operace </h2>

Everything for 1 word heading looks great but for 2 and more words headings like "základní operace" it's wrapping.. There is no reason in this case i have lot of space around as you can see below in the picture.

How can i center it in this case? I need keep absolute position for pseudo class. Without pseudo class ::before i'd just simply set text-align center

Answer 1

Add width: 100%; to your h2. It worked when I just tested your snippet. Alternately, if you specifically want to prevent a line break you could also add white-space: nowrap; .

 h2 { position: absolute; font-size: 3rem; text-align: center; font-size: var(--fs-xl); transform: translateX(-50%); left: 50%; width: 100%; } h2:before { content: ""; position: absolute; width: 80%; height: 1px; bottom: 0px; left: 10%; border-bottom: 3px solid #007bff; }

 <h2> Zakladni operace </h2>