Hinzufügen eines Abstandhalters / Füllers mit gepunkteten Linien mit CSS
Ich arbeite an einer Restaurant-Website. Das Design fordert die typische gepunktete Linie zwischen einem Menüpunkt und dem Preis. Ich habe etwa eine Stunde lang das Netz durchsucht und damit herumgespielt und kann anscheinend keine guten Möglichkeiten finden, dies nur mit CSS zu tun. Ich habe hier ein paar andere Lösungen gefunden, die hervorragend funktionieren, wenn Sie einen einfarbigen Hintergrund haben. Auf dieser Website wird jedoch ein Hintergrundbild verwendet, und diese Lösungen funktionieren nicht.
Beispiel:Menüstil "...." - mit Punkten ausfüllen hat eine gute Lösung, setzt aber die Hintergrundfarben des Menüelements und den Preis auf Weiß, um die gepunkteten Linien dahinter auszublenden, aber die Seite, die ich baue, hat ein Hintergrundbild, sodass einfarbige Hintergründe schlecht aussehen würden.
Ich habe versucht, alle möglichen Kombinationen von Tabellenzeile / Tabellenzelle oder andere Arten von CSS-Anzeigeattributen und Breiteneinstellungen für die Elemente zu verwenden, aber keine Würfel.
Hier ist ein falsches Beispiel-Markup:
<ul>
<li><span>Soup</span><span class="dots"> </span><span>$2.99</span></li>
<li><span>Ice cream</span><span class="dots"> </span><span>$5.99</span></li>
<li><span>Steak</span><span class="dots"> </span><span>$20.99</span></li>
</ul>
Ich habe versucht, dies zum Laufen zu bringen, indem ich das Klassenelement "dots" mit einem unteren Rand verwende, um die Lücke zu füllen, aber nichts, was ich versuche, funktioniert. Ich habe das LI-Element auch nur am unteren Rand jeder Zeile mit einem unteren Rand versehen, aber das ist nicht das, was der Designer will. Ich kann es mir nur als letzten Ausweg in Javascript vorstellen, aber ich wollte sehen, ob ihr irgendwelche Ideen habt. Oder ich kann nur Tabellen verwenden, wollte das aber auch unbedingt vermeiden.
Vielen Dank!