[CSS]Dynamiczna linia pozioma w nagłówku Opcje

[daggoth]

Witam. Mam dość ciekawy problem a mianowicie stworzenie linii w nagłówku wg następującego wzorca :
------------- NAGŁÓWEK ----------------

Linia ma być od left:0 do right:0 a sam nagłówek ma ją przykrywać.
Oczywiście zagadnienie jest śmiesznie proste, do momentu gdy w tle diva mamy obrazek, który za pomocą javascriptu dostosowywuje się do szerokości strony (rozszerza się).

W obecnej chwili rozwiązałem to wersją "chwilową" czyli ustawienie stałej szerokości tel linii np 1000px. Jednakże to rozwiazanie jest głupie i daje się odczuć po odpaleniu np mobilnej wersji.

Czy ktokolwiek ma jakiś sensowny pomysł ?
Podkreślę dla nadgorliwców: W tle tego dziadostwa jest obrazek, który się rozszerza, więc wstawienie diva który przykryje sztywną kreskę jest równie głupim pomysłem jak zastosowany przeze mnie.

[HTML] pobierz, plaintext 
<style>
.box_header span {
    display: inline-block;
    position: relative;
    z-index:26;
    color:#fff;
    font-family: 'corbertregular';
    font-weight:bold;
    font-size:35px;
    padding:8px 0;
    margin:0;
}
.box_header span:before,
.box_header span:after {
  content: "";
  position: absolute;
  height: 25px;
  border-bottom: 2px solid #cd3163;
  top: 0;
    width: 1000px;
}
.box_header span:before {
  position: absolute;
    right:100%;
  margin-right: 60px;
}
.box_header span:after {
  left: 100%;
  margin-left: 60px;
}
</style>
<div class="box_header"><span>O Nas</span></div>
[HTML] pobierz, plaintext 

[trueblue]

Który z tych elementów nie musi być obrazkiem?

[proszek]

http://codepen.io/anon/pen/apcgG

Zobacz mój przykład, powinno pomóc.