Mam dosyć niestandardowy problem. Mam nagłówek (na różnych podstronach inny, więc różnej szerokości) i pod nim od początku ekranu do końca tekstu ma być linia (nagłówek wycentrowany)

Tak jak na tym zdjeciu:


Jak rozwiązać taki problem? Próbowałem zrobić after z 50% szerokości i left:0 a sam nagłówek mial border-bottom ale na każdej przegladarce było minimalne przesunięcie w różnych kierunkach (góra, dół).

Dodaj w css:

[HTML] pobierz, plaintext 
width: auto;
//dodatkowo dla marginesu
padding-left: 10px;
padding-right: 10px;
[HTML] pobierz, plaintext 

nic to nie zmieniło

Daj twój obecny kod.

[HTML] pobierz, plaintext 
  <style>
  .titleline { text-align:center; }
  h2 { display:inline, border-bottom:2px; padding:0; margin:0; font-size:16px; }
  h2:after { position:absolute; margin-top:24px; content: " "; width:50%; height:2px; background-color:#000; left:0; }
  </style>
 
  <div class="titleline">
    <h2>Nasz serwis</h2>
  </div>
[HTML] pobierz, plaintext 

Kod wyglądał mniej więcej tak (skasowałem go już) - margin-top w h2:after miał mieć taką wartość, by nachodził na bordera h2. Każda przeglądarka inaczej stylizuje trochę czcionki i tekst i nie zawsze nałożą się te 2 linie

Na razie tyle: http://jsfiddle.net/ch2kzp3x/
Nie rozumiem dlaczego chcesz nałożyć border-bottom z tekstu na tą linię.

By zrobić linię od prawej strony zmieniam left na right - wszystko działa ale pojawia się suwak przy urządzeniach mobilnych - jakiś sposób na rozwiązanie tego?

overflow:hidden dla .titleline i pokombinuj z padding-bottom lub wysokością.