Как подчеркнуть пустое пространство в CSS?

Я делаю отчет, который можно распечатать из веб-браузера. Внизу есть поле для заполнения получателем, так что s подчеркнут. Я бы предпочел не обращать внимания на определенное количество подчеркиваний, и в них все равно есть пробелы.

Я хочу ...

Выплаченная сумма: $ _ __ _ __ _ __ _ __ _ __ _ ___

Пока мне удалось это CSS:

<div>
    <p style="border-bottom: 1px solid black;">
        Amount Paid: $ 
    </p>
</div>

Это рисует линию до края родительского div - что мне и нужно. Однако он также рисует линию под «Выплаченная сумма: $», что мне не нужно. Каждая комбинация p s, span s и т. Д., О которых я думал, потерпела неудачу:

Если я поместил текст в диапазон , граница, это не имеет значения, я полагаю, поскольку она все еще является частью p , и граница все еще нарисована.

Я могу добавить подчеркивание к диапазону после текста, но это не работает. Кажется, что он хочет подчеркнуть пустое пространство только тогда, когда стиль границы находится в элементе p .

Аналогично, если я заменю p на span ] он не получает напоминание о том, что он должен полностью расширить границу:

<p>
    <span>Amount Paid: $ </span>
    <span style="border-bottom: 1px solid black;"> </span>
</p>

Ничего не делает. Линия никогда не проводится. Если я добавлю букву ко второму отрезку, она будет нарисована под ним, но не более того. И если я заменю p чем-нибудь еще, например div или span, это тоже не сработает ...

Есть идеи? Заранее спасибо.