justificando el texto con puntos en css

pregunta: ¿Cómo puedo alinear el texto a la derecha con espacios de puntos uniformes usando CSS simple, como se ve? en este ejemplo?

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

Respuesta: Para lograr esta justificación, una técnica que utiliza: después del pseudoelemento se emplea comúnmente:

css:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

Html:

Drug 1

10ml

Another drug

50ml

Third

100ml

limitaciones:

• es decir, las versiones a continuación 8 no son compatibles.
• no puede incluir entidades HTML, limitando el uso de caracteres especiales como & MidDot;. Sin embargo, los caracteres UTF-8 pueden satisfacer la mayoría de las necesidades.