Headline mit gepunkteter Linie (.png) -> fehlerhafte CSS?

Hallo,

ich möchte gerne dieses Styling einer Headline mit gepunkteter Linie, die rechts neben dem Text anschließt. Die Linie ist aus einem .png erstellt:

[attach='7209.vB'][/attach]

Diesen Code hab ich in einer Seite:

<div class="subtitle">
<h3>This is a test subtitle</h3>
</div>

und das sind die dazugehörigen CSS:

.subtitle {
    margin-bottom: 25px;
    position: relative;
}


.subtitle h3 {
    font-size: 14px;
    padding-right: 15px;
}


.subtitle:before {
    background: url("http://blabla.de/testseite/wp-content/uploads/sites/5/2013/04/divider10.png") repeat-x scroll center center transparent;
    content: "";
    height: 7px;
    margin-top: -3px;
    position: absolute;
    top: 50%;
    width: 100%;
}

Ergebnis:

[attach='7210.vB'][/attach]

Live:
http://playground.viaina.de/testpage/

Irgendwas muss jedoch mit meinem ":before" Code falsch sein ... was kann ich tun, damit die gepunktete Linie nicht hinter den jeweiligen Text geht, sondern rechts davon anschließt?

Danke.