Dodanie przerywanej linii przerywnika / wypełnienia CSS
Pracuję na stronie internetowej restauracji. Projekt wymaga typowego wypełnienia przerywaną linią między pozycją menu a ceną. Przeszukiwałem sieć i bawiłem się nią przez mniej więcej godzinę i nie mogę znaleźć żadnych dobrych sposobów, aby to zrobić tylko za pomocą CSS. Znalazłem tutaj kilka innych rozwiązań, które działają świetnie, jeśli masz jednolite tło, ale na tej stronie używa obrazu tła i te rozwiązania nie będą działać.
Przykład:Styl menu „....” - wypełnij kropkami ma dobre rozwiązanie, ale ustawia kolory tła na biały element menu i cenę, aby ukryć za nimi kropkowane linie, ale strona, którą buduję, ma obraz tła, więc wszelkie jednolite kolory będą wyglądać źle.
Próbowałem użyć wszystkich rodzajów kombinacji wierszy tabeli / komórki tabeli lub dowolnego innego typu atrybutów wyświetlania CSS i ustawień szerokości na elementach, ale bez kości.
Oto niektóre fałszywe znaczniki przykładowe:
<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>
Starałem się, aby to działało, używając elementu klasy „kropki” z dolną krawędzią do wypełnienia luki, ale nic, czego próbuję, nie działa. Po prostu umieszczam dolną ramkę na elemencie LI na całej długości każdego wiersza, ale to nie jest to, czego chce projektant. Mogę myśleć o zrobieniu tego w javascript tylko w ostateczności, ale chciałem sprawdzić, czy macie jakieś pomysły. Albo mogę po prostu użyć tabel, ale tak naprawdę chciałem tego uniknąć.
Dzięki!