Ti rispondo solo ora perché la cosa mi ha incuriosito e ho speso un po' di tempo per cercare e provare diverse soluzioni.
Effettivamente non c'è un modo semplice per personalizzare una linea puntinata, come chiedi tu. Ho provato con gli pseudo-elementi impostando un content con la serie di punti testuali e definendo font-size e letter-spacing; poi ho provato anche con una combinazione di background-image e radial-gradient per creare un pattern di punti/cerchi. Sono riuscito a combinare qualcosa ma effettivamente i risultati prevedono delle impostazioni alquanto complicate che rendono il procedimento, per effettuare delle personalizzazioni, difficile e poco intuitivo; come d'altronde hai potuto constatare tu stesso. Ho quindi abbandonato l'idea di usare questi tipi di soluzioni.
Ho poi cercato altre soluzioni e tra quelle più valide ho trovato la possibilità di usare SVG+XML dentro background-image.
In sostanza si tratta di impostare un markup XML usando le apposite definizioni SVG per creare la linea puntinata, quindi inserire il tutto nel background-image. A quel punto, per la personalizzazione basterà modificare i valori dei relativi attributi SVG.
Certo, anche questa soluzione non è il massimo della semplicità ma, con qualche indicazione e qualche accorgimento, si può arrivare ad usarla con buoni risultati.
Qui un esempio XML per creare la linea puntinata in SVG:
codice:
<svg width="100%" height="100%">
<line x1="3" x2="100%" y1="50%" y2="50%" stroke="#e5e5e5" stroke-width="6" stroke-linecap="round" stroke-dasharray="1 10"/>
</svg>
Una volta definito il codice XML che restituisce l'immagine SVG è possibile codificarlo così che nel CSS sia letto come stringa URL.
Può aiutare l'uso di un codificatore tipo questo: URL-encoder for SVG
Il codice è abbastanza intuitivo. Ho impostato width e height del contenitore <svg> al 100% in modo tale che, una volta inserito come background, l'immagine si estenda per l'intero contenitore in cui è applicata (ad esempio il tuo span o magari uno pseudo elemento CSS).
L'elemento <line> costruisce la linea SVG. Per le sue proprietà puoi eventualmente consultare qualche documentazione, vedi ad es. qui: <line> - SVG Scalable Vector Graphics | MDN
Qui l'esempio che ho realizzato per il tuo caso:
codice HTML:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<style>
#pannello { /* Contenitore principale */
display: block;
width: 600px;
margin: 0 auto;
padding: 0;
list-style-type: none;
font-size: 16px;
font-weight: bold;
}
#pannello > li { /* Riga */
display: flex;
align-items: baseline;
padding: .2em 0;
}
#pannello > li > span:first-child { /* Etichetta */
font-size: 1em;
font-weight: bold;
}
#pannello > li > span:last-child{ /* Prezzo */
display: flex;
align-items: baseline;
flex: 1;
font-size: 1.15em;
font-weight: bold;
}
#pannello > li > span:last-child:before { /* Linea divisoria */
content: "";
display: inline-block;
flex: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='3' x2='100%25' y1='50%25' y2='50%25' stroke='%23e5e5e5' stroke-width='6' stroke-linecap='round' stroke-dasharray='1 10'/%3E%3C/svg%3E");
/* Attributi SVG:
x1 : x iniziale; usare un valore pari alla metà di stroke-width così che il primo punto sia tangente al lato sinistro
x2 : x finale; usare '100%' per estendere l'immagine SVG all'intero spazio disponibile
y1 : y iniziale; usare '50%' così che la linea sia centrata in verticale
y2 : y finale; come y iniziale
stroke : colore linea
stroke-width : spessore linea
stroke-linecap : forma delle sommità di ogni tratto; usare 'round' per ottenere punti rotondi
stroke-dasharray: vettore dei tratti con alternanza pieno e vuoto, ad esempio '1 10', dove 1 è la parte piena e 10 è la parte vuota (non considerando le forme delle sommità di ogni tratto)
*/
height: 6px; /* usare lo stesso valore di stroke-width */
}
#pannello > li > span:first-child,
#pannello > li > span:last-child:before { /* Margini laterali linea */
margin-right: 15px;
}
</style>
</head>
<body>
<ul id="pannello">
<li><span>Prodotto 1:</span><span>Euro 100</span>
<li><span>Prodotto 2:</span><span>Euro 120</span>
<li><span>Prodotto 3:</span><span>Euro 50</span>
</ul>
</body>
</html>
Ho commentato i vari attributi SVG per avere chiaro come puoi personalizzare il tutto ma se hai bisogno di ulteriori chiarimenti, riguardo il codice, chiedi pure.
Tieni conto che puoi modificare direttamente i valori dentro il codice già definito in background-image, senza ripartire ogni volta dal codice XML e ripetere la codifica URL, però fai attenzione a riportare correttamente le entità numeriche relative ai caratteri riservati che sono stati codificati (ad es. %25 per %, %23 per #, ecc.).
Per ciò che hai chiesto, mi pare sia un buon compromesso.
Prova e fai sapere; buon proseguimento.
Rispondi quotando
capisco anche le tue difficoltà nel comprendere pienamente il codice ma, tranquillo, nonostante i miei 20epassa anni di esperienza, anche io mi trovo spesso a dovermi sforzare per poter apprendere cose nuove (come si dice: "non si finisce mai di imparare")... e poi, puoi sempre chiedere aiuto sul forum 
