Nachtrag: Die unten stehende Lösung ist von 2013. Heute, 2017, gibt es dank FlexBox bessere Lösungen!

Eine gepunktete Linie zwischen zwei Texten, per CSS und auch noch "responsive"? "Geht nicht" denkt man sich da erst einmal. Geht doch:

CSS:

.dottet_line_wrapper { 
    width: 100%; 
}
.dottet_line_left { 
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 70%; 
}
.dottet_line_left:after { 
    content: ".............................................";
}
.dottet_line_right { 
    direction: rtl;
    float: right;
    overflow: hidden;
    white-space: nowrap;
    width: 30%;
}
.dottet_line_right:after {
    content: ".............................................";
}

HTML:

<div class="dottet_line_wrapper">
   <div class="dottet_line_left">Produkt</div>
   <div class="dottet_line_right">Preis</div>
</div>

Nachteile dieser Umsetzung:

  • - Das CSS ist nicht besonders hübsch. Die Mindestlänge der gepunkteten Linie muss "ausprobiert" werden, "zu lang" darf sie sein.
  • - Man sieht es. Je nach dargestellter Breite und Größe der Punkte kann der Übergang zwischen den beiden Punktlinien sichtbar werden.