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.