Добавление пунктирной линии проставка / заполнение с помощью CSS
Я работаю на сайте ресторана. Дизайн требует типичной пунктирной линии между пунктом меню и ценой. Я рыскал в сети и баловался с ней в течение часа или около того и, похоже, не могу найти каких-либо хороших способов сделать это только с помощью CSS. Я нашел здесь несколько других решений, которые отлично работают, если у вас сплошной цвет фона, однако на этом сайте он использует фоновое изображение, и эти решения не будут работать.
Пример:Стиль меню & quot; .... & quot; - заполнить периодами имеет хорошее решение, но он устанавливает фоновые цвета на белый для пункта меню и цены, чтобы скрыть пунктирные линии за ними, но создаваемая мной страница имеет фоновое изображение, поэтому любые однотонные фоны будут выглядеть плохо.
Я пытался использовать все виды комбинаций таблицы-строки / таблицы-ячейки или любого другого типа атрибутов отображения CSS и настроек ширины элементов, но не играли в кости.
Вот небольшая разметка образца:
<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>
Я пытался заставить это работать, используя & quot; точки & quot; Элемент класса с нижней границей, чтобы заполнить пробел, но ничего, что я пробую, не работает. Я также просто поместил нижнюю границу элемента LI в нижней части каждой строки, но это не то, чего хочет дизайнер. Я могу думать только о том, чтобы сделать это в javascript в качестве крайней меры, но хотел посмотреть, есть ли у вас, ребята, какие-нибудь идеи. Или я могу просто использовать таблицы, но очень хотел этого избежать.
Спасибо!